固定宽度可变高度的网格CSS

Question

如何在网格布局中实现固定宽度和可变高度，就像www.pinterest.com主页布局一样。我认为他们使用了Javascript，想知道是否有其他方法。仅使用float:left无法实现。感谢任何帮助。

- bingjie2680

Answer 1

也许你可以使用CSS3的column-count属性作为替代方法。像这样：

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
}

请阅读这篇文章：http://css-tricks.com/seamless-responsive-photo-grid/ 例如，请查看此链接：http://jsfiddle.net/pMbtk/55/

- sandeep

---

这是个不错的技巧 - 我之前并不知道 column-count 和 column-gap 属性。 - Pat

唯一的缺点是您无法动态添加更多元素，否则会破坏块的顺序。 - Attila O.

Answer 2

最简单的选择是使用jQuery Masonry插件。

如果你想仅通过CSS实现，你需要浮动相等宽度的大列，然后在其中添加变高元素。

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

而CSS看起来会像这样：

.parent {
  float: left;
  width: 200px; /* adjust as needed */
}

.child {
  /* these are variable height */
}

- Pat

---

感谢您的脚本。一个问题是每个子元素的高度都不同。因此，如果在第一列中，所有子元素相对较高，则第一列将比其他列长得多，这看起来不太美观。 :) - bingjie2680

这就是JavaScript再次派上用场的地方。在onload事件中，您可以检查不同列的高度，并移动.child元素，以使所有列大致相等。请注意，如果您要这样做，最好使用预先构建的东西。另一个类似于瀑布流的库是isotope：http://isotope.metafizzy.co/ - Pat

好的技巧。最终我们决定使用自己的脚本。感谢您的提示和出色的参考。:) - bingjie2680