css - 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元素上应用这些最大尺寸来强制对齐，如 this fiddle。

缺点是您在图像周围创建了额外的空间，根据您的设计要求，这可能是不受欢迎的，但您至少可以使用 css 使其看起来“不错”。