浮动列表元素与不需要的空间

Question

我有一个无序的缩略图列表，除了一个之外，每个其他页面都有效。在这个特定的页面上，第三行有大量的空格。见下文：

我不明白为什么会这样做，即使你拿走了填充和边距也会发生这种情况。执行此操作的页面为http://bransonweekend.net/cabins/trailsend

Answer 1

这是因为您正在使用：

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

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

尝试添加：

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

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

Answer 2

试试这个图书馆：

http://masonry.desandro.com/

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