html - Zurb Foundation 多列网格高度问题

Question

我将 Zurb Foundation 用作快速开发轻型元素的漂亮平台。今天我坚持了一件事。 我不知道如何更好地调用它，更容易显示...

http://oi61.tinypic.com/2dkhfuq.jpg

因此，当上面的列内容过多时，就会发生这种情况。 另外...列必须具有非固定高度并且不要使用 block 状网格!泰!

Answer 1

有两种方法可以解释您的要求。首先是您遇到了一个 float 问题，并且列向右堆叠。如果你想让空白消失，你需要一个像 Masonry 或 Isotope 这样的 JS 插件。 .

另一种解释方式是您希望它们处于同一高度。使用 Foundation 有 2 种方法可以解决这个问题:要么用以下方法包装每一行:

<div class="row">
  <div class="small-12 medium-4 columns"></div>
  <div class="small-12 medium-4 columns"></div>
  <div class="small-12 medium-4 columns"></div>
</div>

行类在启动后基本上会清空，因此会为它们留出空间。您不需要使用我的语法，但这将是一个有效的示例。如果你想让所有的文章都基于最大的文章具有相同的高度，Foundation 有一个很棒的内置插件，叫做 Equalizer。 .

均衡器和我的专栏语法依赖于使用 Foundation 5。