html - HTML/CSS 中的平铺布局

Question

对于比我更了解 CSS 的人来说，这可能是小菜一碟。

我正在尝试创建一个 CSS 布局，其中包含许多我想像磁贴一样排列的元素。每个图 block 的宽度相同(尽管高度不同)，因此它们自然会排列成列，如下所示:

http://jsfiddle.net/SVzWh/

我想知道如何使同一行中的每个元素具有相同的高度。我不知道那个高度是多少，因为图 block 的内容(有点)是动态的。理想情况下，图 block 会像 fiddle 中所示那样流动，这样在较宽的屏幕上会有更多的列，在较窄的屏幕上会有更少的列。可能有几十个磁贴。

这是 fiddle 中显示的代码:

一段 HTML:

<ul>
  <li class="e">Element 1</li>
  <li class="e">Element 2 Taller item</li>
  <li class="e">Element 3</li>
  <li class="e">Element 4</li>
  <li class="e">Element 5</li>
  <li class="e">Element 6</li>
  <li class="e">Element 7</li>
  <li class="e">Element 8</li>
</ul>

还有一点 CSS:

.e {
  display: inline-block;
  border: 1px solid black;
  margin: 5px;
  padding: 3px;
  width: 120px;
}

Answer 1

查看JQuery masonry ，它是一个 JQuery 插件，可以满足您的需求。