Zurb 基金会：块网格等高图像？

Question

我有一些高度不同的图像，我试图将它们显示在高度相等的块网格中，但我无法弄清楚。

我认为在 div 中制作背景图像是正确的方法，但我不太确定。

这里是一个基本正在发生的事情的代码笔。我希望同一行上的块相等。 http://codepen.io/anon/pen/VvGpXa

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-2 data-equalizer">
<li data-equalizer-watch><img src="http://placehold.it/350x150"></li>
<li data-equalizer-watch><img src="http://placehold.it/350x250"</li>
<li data-equalizer-watch><img src="http://placehold.it/350x150"></li>
<li data-equalizer-watch><img src="http://placehold.it/350x100"></li>
</ul>

如果有人能帮我解决这个问题，那就太棒了！谢谢！

Answer 1

有几件事需要更新。

首先是你需要包含 jQuery。 Foundations javascript 依赖于 jQuery，因此请务必在加载 Foundation 的 javascript 之前加载它。

<script src='link_to_jQuery'></script>        
<script src='link_to_foundation_js'></script>

第二个是你需要初始化Foundation的js并给equalizer方法发送一些额外的参数。

<script>
$(document).foundation({
  equalizer : {
  // Specify if Equalizer should make elements equal height once they become stacked.
  equalize_on_stack: true
  }
});
</script>

数据均衡器不是 css 类。它是一个数据元素，需要是这样的：

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-2" data-equalizer>

这是一个有效的 codepen（我将 panel 类添加到您的 lis 以便更容易查看是否一切正常）：http://codepen.io/anon/pen/KdxZBB