HTML，嵌套 Div 问题

Question

在我的页面中，我有三个部分：页眉、正文和页脚。 在正文中我有三个 div。第一个 div 包括另外两个小 div。

我写了这段 CSS 代码：

#body_container{
    margin: 10px 160px;
    height: auto;
    width: 100%;
    clear: both;
    border: 1px solid #3F0;
}

div.body_contents{
    height: auto;
    width: 74%;
    float: left;
    border: 1px solid #960;
}

div.sidebar{
    height: auto;
    width: 25%;
    float: right;
    border: 1px solid #F0F;
}

但是当我检查它时，div 超出了我的框架。我给了左右 160px 的边距。我应该怎么办？ 谢谢

Answer 1

我讨厌使用百分比，因为它们取决于其他因素。

我通常用静态值做一些事情，比如：

#body_container{
    margin: 10px auto; /** The auto will make this div centered to the page **/
    width: 1000px; /** suppose you want this width **/
    clear: both;
    border: 1px solid #3F0;
}

div.body_contents{
    width: 748px; /** The width of the main part, -2px (for the border) **/
    float: left;
    border: 1px solid #960;
}

div.sidebar{
    width: 248px; /** The width of the side bar, -2px (for the border) **/
    border: 1px solid #F0F;
}

当然，如果你希望主 div 的宽度根据浏览器的大小而改变（就像你原来的 CSS 一样），我的答案不起作用。

但我建议您不要根据浏览器更改宽度，因为它会根据窗口更改页面的组织。

Answer 2

这很简单，margin 添加到元素的最终渲染宽度（即父级宽度的 160 x 2 + 100%，因此它是溢出），因此您可能想要将其设置为，例如外部 div，宽度为 79%，左右边距各为 10%（因此总计为 99%，少 1% 以便为边框等留出一些空间……尽管我通常不是这样做的）

示例： http://jsfiddle.net/MKjwU/6/

还有一件事：清除浮动，您没有像示例中那样清除它...

要么使用额外的 div，如下所示： http:// /jsfiddle.net/MKjwU/7/

或使用此技术：http://www .quirksmode.org/css/clearing.html

参见：http://jsfiddle.net/ MKjwU/8/