列表項不要垂直對齊

Question

我正在嘗試製作具有變量高度的項目列表。當我嘗試使用水平行對齊的項目製作一個整齊的列表時，當列表項全都具有相同的高度時，一切順利。當一個或多個物品有更高的高度時會出錯。我創建了一個JSFiddle來非常清楚地顯示問題。誰能幫我嗎？

http://jsfiddle.net/NNLDn/

我的html：

<div> 
    <ol> 
     <li></li> 
     <li></li> 
     <li style="height: 140px;"></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ol> 
</div> 

我的CSS：

div { 
    width: 730px; 
} 

ol { 
    width 730px; 
    margin-left: -40px; 
} 

ol li { 
    display: block; 
    width: 167px; 
    height: 120px; 
    margin: 0 0 15px 15px; 

    background:red; 
    float: left; 
} 

Answer 1

您應該考慮使用display:inline-block代替float:left，那麼你也可以玩與vertical-align元素的垂直對齊。

Answer 2

唯一的CSS解決方案，我知道，如果你知道的li項目每行的數量，是包圍在div中的每一行，然後浮動這些div。這樣，自動與每格調整到最高立的高度，而且沒有浮動li旨意獲得的「掛斷」

div div { float: left; clear: both; }

http://jsfiddle.net/NNLDn/1/

Answer 3

我無法仔細檢查容易了，因爲我在我的電話，但我認爲你需要使用display:inline-block，而不是使用float