17

我正在尝试在 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%;
}

我不确定其中是否还有其他相关的 css 属性style.css我没有识别出来。无论如何,孩子 divs 躺在外面#main。如何强制将子 div 包含在其中#main?(除了减少 的宽度#primary,这对我没有影响)

4

4 回答 4

32

您需要添加overflow: auto#main

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}
于 2012-08-15T05:57:07.757 回答
13

您应该将 clearfix 方法与伪元素 :after 一起使用,因为在您的情况下, clear 并没有真正应用在孩子之后。

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

http://jsfiddle.net/zfsjb/

编辑 2020:

一段时间以来,这个更简单的解决方案也同样有效:

#main::after {
    content: "";
    display: table;
    clear: both;
}

此外,现在建议使用::after而不是:after匹配其他伪元素。

于 2012-08-15T07:57:13.213 回答
1

尝试 width: 100%; position:absolute给予#main.

是一个有效的现场演示

于 2012-08-15T06:02:51.283 回答
-1

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

于 2020-04-22T23:14:26.557 回答