列表项不要垂直对齐

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