Question

显然我的大脑今天早上变得糊里糊涂了。我觉得答案是显而易见的，但我无法弄清楚我在做什么愚蠢。我猜这个CSS有问题所以这就是：

.fulldiv {
    border:2px solid green;
    background:white;
    margin: 10px 0 10px 5px;
    width:97.5%;
}
.fulldiv h2 {
    background:green;
    padding: 10px 5px;
    margin:0;
}
.fulldiv p {
    padding: 5px 5px;
    margin:0;
}

.thirds {
    border:2px solid cyan;
    background:white;
    margin: 10px 0;
    width:31.5%;
    float:left;
    margin-left:5px;
}
.thirds h2 {
    padding: 10px 5px;
    background:cyan;
    margin:0;
}
.thirds p {
    margin:0;
    padding: 5px 5px;
}

可以看到完整的恶作剧 JS Fiddle

第三个.hicon div不应该与前一个分开吗？为什么三分之三的div在最后一个div内变冷？我在俯瞰什么？

Answer 1

You need to add：

<div style='clear:both;'></div>

在最后的.thirds div之后，为了清除你所拥有的浮动并恢复文档流程。

或者你可以在.thirds的nth-child（3）上使用css clearfix（或者直接添加clearfix类）

Answer 2

看起来像一个明确修复的案例！我已经在Nicolas Gallagher的microclearfix中添加了，但那里有很多。

http://jsfiddle.net/C9MZp/4/

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

我听说你喜欢DIV，所以我把你的DIV放在你的DIV中

2 个答案: