css - 带有不需要空间的浮动列表元素

Question

我有一个无序列表的缩略图，可以在除一个之外的所有其他页面上使用。在这一特定页面上，第三行有大量空白。见下文：

我不明白它为什么这样做，即使你去掉填充和边距也会发生这种情况。这样做的页面是http://bransonweekend.net/cabins/trailsend

Answer 1

这是因为您正在使用：

.picture-board .pinned-photo img {
max-height: 160px;
}

在该行中，第一个图像形状因子使其达到最大高度，但其他两个太宽，因此高度小于最大 160 像素。

尝试添加这个：

.thumbnails>li{
min-height:172px;
}

这将确保它们的高度相同，即使它们太宽

Answer 2

试试这个库：

http://masonry.desandro.com/

它在像这样的情况下很有用，其中元素必须在网格上排列。砌体在整个互联网上都有使用。