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。基础javascript依赖于jQuery，所以一定要在加载Foundation的javascript之前加载它。

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

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

<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>

这是一个有效的代码工具（我已将panel课程添加到您的li中，以便更容易查看所有内容是否正常工作）：http://codepen.io/anon/pen/KdxZBB

Zurb Foundation：Block Grid Equal Height Images？

1 个答案: