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。