水平對齊兩個DIV

Question

爲什麼Box B在下面的代碼中包圍框A？是不是浮動框左側A應該讓他們水平對齊？

<div style="width:300px"> 
    <div style="width:45%;margin:5px;float:left;border:1px solid black"> 
    <p>Box A</p> 
    This is just content for box A. 
    </div> 
    <div style="width:45%;margin:5px;border:1px solid red"> 
    <p>Box B</p> 
    This is just content for box B. 
    </div> 
</div> 

http://jsfiddle.net/VCr8y/

Answer 1

通過添加float: left的第一個div，你有效地從頁面流中去除，但盒子B不會從頁面流中移除。但是，框B不能通過框A運行文本，所以它只是「圍繞」它，就像您在JSFiddle中看到的那樣。你應該做的是浮動盒子B爲好，並應用之後清晰（或another clearfix solution），以便通過的div沒有掩蓋了你的兩個div後：

<div style="width: 300px;"> 
    <div style="width: 45%; margin: 5px; float: left; border: 1px solid black;"> 
    <p>Box A</p> 
    This is just content for box A. 
    </div> 
    <div style="width: 45%; margin: 5px; float: left; border: 1px solid red;"> 
    <p>Box B</p> 
    This is just content for box B. 
    </div> 
</div> 
<div style="clear: both;"></div> 

Here's a JSFiddle.順便說一句，使用類會可能會有所幫助。