我怎樣才能正確地讓div並排坐在一起？

我明白這個想法，你可以使用內聯塊來讓div彼此相鄰，並且你可以在父對象上使用nowrap來確保它們不會被換行。我的問題是，將任何div放入這些使得下面的div壓下。我創建了一個的jsfiddle，藉以說明問題：我怎樣才能正確地讓div並排坐在一起？

http://jsfiddle.net/MMtNQ/2/

的HTML的要點是：

<div class="wrapper"> 
    <div class="side-by-side"> 
     <div>Text here</div> 
     <div>Text here</div> 
    </div> 
    <div class="side-by-side"> 
     <div>Text here</div> 
    </div> 
</div>

你可以看到的div被向下調整，因爲在div我在第一個。我怎樣才能讓他們全部對齊頂部？

來源

2013-02-12 weexpectedTHIS

添加vertical-align: top;到.side-by-side定義

.side-by-side { 
    display: inline-block; 
    width: 300px; 
    height: 300px; 
    background-color: #e6e6e6; 
    margin-right: 10px; 
    vertical-align: top; 
}

Here's a fiddle。

來源

2013-02-12 18:05:27

這也是我領導的地方，儘管我無法解釋爲什麼第一個div高和其他低。我想聽聽解釋。 – isherwood 2013-02-12 18:08:32

雅，我不明白爲什麼這個修復它，我認爲vertical-align適用於內部的內容，而不是元素本身。 – weexpectedTHIS 2013-02-12 18:12:22

@weexpectedTHIS默認情況下，內聯塊對齊基線，瀏覽器並不總是很好地解決這個問題，特別是對於不同內容的元素。請參閱[本頁]（http://css-tricks.com/what-is-vertical-align/）以獲得相當好的解釋。 – 2013-02-12 18:22:12

我怎樣才能正確地讓div並排坐在一起？

回答

相關問題