Html 容器 div 内的多个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6461541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple divs inside a container div
提问by kingrichard2005
I have a page with a container div that holds three additional divs as follows:
我有一个包含三个额外 div 的容器 div 页面，如下所示：
<div id="container>
<div id="top"></div>
<div id="content">
<!-- Dynamic content placed here auto expands this div -->
</div
<div id="bottom"> Copyright logo </div>
</div>
and my CSS:
和我的 CSS：
#containerDiv {
position: relative;
right: 425px !ie7;
width: 910px;
margin: 0px auto;
}
#top {
background: url(../images/top_width956px.gif) top center no-repeat;
height: 39px;
line-height: 0;
margin: 0px auto;
width: 956px;
position: relative;
left: 19px;
}
#content {
position: relative;
margin: 20px 201px 20px 201px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
background: #ffffff;
color: #333333;
padding: 20px;
z-index: 3;
}
#bottom {
height: 161px;
color: #666;
font-size: 80%;
padding: 20px;
margin: 0 auto;
width: 908px;
}
My problem is that I have dynamic content that's loaded into the "content" div, which causes it to overlap into the "bottom" div. I don't want to hide the content, so overflow: hiddenis not an option. The behavior I'm looking for is, if the content expands the middle div, it should push the "bottom" div down. I'm not sure how to achieve that. Any help is appreciated.
我的问题是我有动态内容加载到“内容”div 中，这导致它重叠到“底部”div 中。我不想隐藏内容，所以溢出：隐藏不是一个选项。我正在寻找的行为是，如果内容扩展了中间 div，它应该将“底部”div 向下推。我不确定如何实现这一目标。任何帮助表示赞赏。
UPDATE:
更新：
Thanks all for the help. Turns out the "content" div had an inline style that had several inline styles that were conflicting with the styles in the css file; a coworker had been working on this and I didn't notice the inline style amongst all the other content. One of them had the position set to "absolute", I removed that and it seemed to fix the problem. I also moved the rest of the inline styles into the css file Here is an updated version of my code:
感谢大家的帮助。原来“内容”div 有一个内联样式，它有几个与 css 文件中的样式冲突的内联样式；一位同事一直在研究这个，我没有注意到所有其他内容中的内联样式。其中一个将位置设置为“绝对”，我删除了它，似乎解决了问题。我还将其余的内联样式移到了 css 文件中，这是我的代码的更新版本：
Updated CSS:
更新的 CSS：
#containerDiv {
position: relative;
right: 425px !ie7;
width: 910px;
margin: 0px auto;
}
#top {
background: url(../images/top_width956px.gif) top center no-repeat;
height: 39px;
line-height: 0;
margin: 0px auto;
width: 956px;
position: relative;
left: 19px;
}
#center-col {
position: relative;
margin: 0px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
background: #ffffff;
color: #333333;
padding: 20px;
z-index: 3;
width: 908px;
text-align: center;
margin-right: auto;
margin-bottom: 75px;
margin-left: auto;
visibility: visible;
}
#bottom {
height: 161px;
color: #666;
font-size: 80%;
padding: 20px;
margin: 0 auto;
width: 908px;
position: relative;
bottom: 0px;
}
Sorry for the confusion with the html above, I hand typed it just to give a quick and dirty example of my page layout. My actual html file contains way more content and I might add it is correctly formatted.
很抱歉与上面的 html 混淆，我手动输入它只是为了提供一个快速而肮脏的页面布局示例。我的实际 html 文件包含更多内容，我可能会添加它的格式正确。
采纳答案by ingo
It does.. when you have correct syntax. Take a look at this http://jsfiddle.net/5uSc7/1/
它确实......当你有正确的语法时。看看这个http://jsfiddle.net/5uSc7/1/
回答by kingrichard2005
Change this
改变这个
<div id="container>
<div id="top"></div>
</div id="content">
<!-- Dynamic content placed here auto expands this div -->
</div
<div id="bottom"> Copyright logo </div>
</div>
To this
对此
<div id="container">
<div id="top"></div>
<div id="content">
<!-- Dynamic content placed here auto expands this div -->
</div>
<div id="bottom"> Copyright logo </div>
</div>
HTML 4.0 strict is STRICT
HTML 4.0 严格就是严格
Then use correct tag on CSS file...
然后在 CSS 文件上使用正确的标签...
