为什么第二个身体不与第一个身体div对齐？

Question

为什么 rowDiv 文字未与 ColumnDiv 文字保持对齐，如何解决？

endTime = datetime.datetime.now()
startTime = endTime - datetime.timedelta(minutes=10)    

metrics = cloudwatchConn.get_metric_statistics(60, startTime, endTime,
                                               'CPUUtilization',
                                               'AWS/EC2', 'Average')

JSFiddle

这是我正在使用的简化版本，因此我无法删除/更改任何现有样式。我可以添加类/样式和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 建议的内容是否有效，但正确的方法是清除父母中的浮动孩子。

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

第一个选项 （在父容器中添加一个清除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类并将其添加到您想要“自我清除”的容器中。

<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;
}