Question

我正在尝试在Wordpress中自定义二十二主题。它有一个2列的布局：

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

和

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

我不确定style.css内部还有其他相关的css属性，我还没有认出来。无论如何，孩子在#main之外撒谎。如何强制让#main中包含子div？（除了减少#primary的宽度，这对我没有影响）

Answer 1

您需要将overflow: auto添加到#main：

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}

Answer 2

你应该使用带有伪元素的clearfix方法：之后，因为在你的情况下，在孩子们之后真的没有明确的应用。

#main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

http://jsfiddle.net/zfsjb/

Answer 3

尝试将width: 100%; position:absolute提供给#main。

Here 是一个有效的现场演示

Answer 4

在某些情况下，您只需要将min-height应用于父元素

强制div包含浮动的子div

4 个答案: