css排列整齊的不同大小的列表項目

Question

我有一堆圖像被加載爲一個列表，一些有垂直方向，一些有水平方向，但我希望它們整齊地出現並左對齊。這是我的CSS代碼：

#designgallery 
{ 
    list-style-type:none; 
    margin-top:15px; 
    float:left; 
} 

#designgallery li 
{ 
    display:block; 
    margin:5px; 
    background-color:#eee; 
    padding:5px; 
    float:left; 
} 
.design-display 
{ 
    border:1px solid gray; 
} 
.Horizontal 
{ 
    width:210px; 
    height:122px; 
} 
.Vertical 
{ 
    height:180px; 
    width:122px; 
} 

這是我的HTML：

<ul id="designgallery"> 
<li> <img class="design-display Horizontal" src="1.jpg" /><!--some other stuff--> </li> 
... many list items, some horizontal, some vertical 
</ul> 

但是，這是我所得到的：

在右下角的垂直圖像應該在左側開始新的圖像行，我該怎麼做？

Answer 1

如果您希望獲得「石工」效果，那麼JavaScript是您的解決方案。

如果javascript不是選項，並且確實知道垂直和水平圖像的最大寬度/高度，則可以通過在li元素like in this fiddle上應用這些最大尺寸來強制對齊。

缺點是你根據你的設計要求在圖像周圍創造了額外的空間，但是你可以使它至少看起來很好用CSS。