並排DIV不對齊

Question

我正在嘗試創建幾個DIV並排坐在一起，每個DIV佔據保存它們的div的一半寬度。並排使用float：left可以正常工作，但我的元素不能正確排列。我讓一個jsfiddle向你展示我的意思。 http://jsfiddle.net/kzFqU/

正如你所看到的，它看起來很好，但如果你把結果放在非常寬的地方，那麼輸入的正確對齊就會變成廢話。

<div class="container-narrow"> 
<div class="form_field"> 
    <label>Full Width</label> 
    <input type="text" name="what"> 
</div> 
<div class="form_field halfwidth"> 
    <label>Half Width</label> 
    <input type="text" name="what"> 
</div> 
<div class="form_field halfwidth"> 
    <label>Also Half Width</label> 
    <input type="text" name="what"> 
</div> 
<div class="form_field"> 
    <label>Full Width</label> 
    <input type="text" name="what"> 
</div> 

和CSS

body { 
padding-top: 20px; 
padding-bottom: 40px; 
padding-left: 20px; 
padding-right: 20px; 
background:whitesmoke; 
} 

.container-narrow { 
    margin: 0 auto; 
    background:white; 
    border-radius: 10px; 
    padding:10px; 
} 

.form_field { 
    padding: 10px; 
} 

.form_field input { 
    width:100%; 
} 

.form_field label { 
    margin-bottom:0px; 
} 

.form_field input { 
    clear:both; 
} 

.halfwidth { 
    width: 45%; 
    float: left; 
} 

Answer 1

添加下面的只是你的第二個半寬格後：

<div style="clear:both"></div> 

Answer 2

嘗試半角元素，如後清除浮動：

.form_field:before, 
.halfwidth:before { 
    clear: both; 
    display: block; 
    content: "\0020"; 
    visibility: hidden; 
} 

上面這樣lution是解決問題的一些自我清理的善良！請參閱demo

Answer 3

該問題似乎與.form_field應用的填充有關。我認爲這將達到你想要的效果： http://jsfiddle.net/cx8T2/

.halfwidth { 
    width: 50%; 
    float: left; 
} 

... 

<div class="halfwidth"> 
    <div class="form_field"> 
     <label>Half Width</label> 
     <input type="text" name="what"> 
    </div> 
</div> 
<div class="halfwidth"> 
    <div class="form_field"> 
     <label>Also Half Width</label> 
     <input type="text" name="what"> 
    </div> 
</div> 

從CSS3使用box-sizing屬性也將不要求你改變你的標記工作，但它不是由舊的瀏覽器支持：

.halfwidth { 
    box-sizing: border-box; 
    width: 50%; 
    float: left; 
}