为什么第二个body div 和第一个body div 不对齐？

Question

为什么 rowDiv 文本没有与 ColumnDiv 文本左对齐，我该如何解决？

<div id="d1">
    <div id="d2" style="float: left;">
        <div id="d3" style="font-weight: bold; height: 20px; overflow: hidden;">
            ColumnDiv
        </div>
    </div>
    test text
</div>
<div id="d4" style="overflow: hidden;">rowDiv</div>

JSFiddle

这是我正在使用的简化版本，因此我无法 remove/change 任何现有样式。我可以添加 classes/styles 和 HTML 元素。

Answer 1

只要有空间，浮动对象就会从左到右（或从右到左）堆叠。元素只会尝试绕过它们。如果您想确保您的元素位于任何浮动元素下方，您需要使用 clear 属性:

清除它们

<div id="d1">
    <div id="d2" style="float: left;">
        <div id="d3" style="font-weight: bold; height: 20px; overflow: hidden;">
            ColumnDiv
        </div>
    </div>
    test text
</div>
<div id="d4" style="overflow: hidden; clear: left;">rowDiv</div>

Answer 2

Will Reese 建议的方法会起作用，但正确的方法是清除父项中的浮动子项。

有几种方法可以做到这一点。

第一个选项（在父容器内部添加一个clearing div。应该是关闭前的最后一个元素标签 - 参见 DIV #D5):

<div id="d1">
    <div id="d2" style="float: left;">
        <div id="d3" style="font-weight: bold; height: 20px; overflow: hidden;">
        ColumnDiv
        </div>
    </div>
test text

<DIV ID="D5" STYLE="HEIGHT:1px; OVERFLOW: HIDDEN; CLEAR: BOTH;"></DIV>

</div>
<div id="d4" style="overflow: hidden;">rowDiv</div>

第二个选项： 将清除 CSS 属性添加到 #d1

#d1 {
    *zoom: 1; /*IE7 < hack */
    clear: both; 
    /* Add your styling below. For example:*/       
    background-color: red;
    margin-bottom: 20px; 
    /*etc, etc...*/
}

#d1:before, 
#d1:after {
    content: " ";
    display: table;
}

#d1:after {
    clear: both;
}

第三个选项 - 在我看来是最好的，因为它可以重复使用： 创建一个 .clear class 并将其添加到您想要 "self clear".

的容器

<div id="d1" CLASS="clear">
    <div id="d2" style="float: left;">
        <div id="d3" style="font-weight: bold; height: 20px; overflow: hidden;">
        ColumnDiv
        </div>
    </div>
test text    
</div>
<div id="d4" style="overflow: hidden;">rowDiv</div>

.clear {
    *zoom: 1; /*IE7 < hack */
    clear: both; 
}

.clear:before, 
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

为什么第二个body div 和第一个body div 不对齐？

Why does the second body div not line up with the first body div?

html

css

css-float