Question

我们如何在网格布局中实现固定宽度和可变高度，与www.pinterest.com主页布局完全相同。我认为他们正在使用Javascript。只是想知道是否有其他方法。只使用float:left将无效。谢谢你的帮助。

Answer 1

您可以使用css3 cloumn-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/

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 */
}

固定宽度可变高度网格css

2 个答案: