自定义均衡器的数据（Foundation均衡器Equalizer）

自定义均衡器的数据（Foundation均衡器Equalizer）Sed ut... <div class="medium-4 columns panel" data-equalizer-watch> <div class="medium-4 columns panel" data-equalizer-watch> Lorem ipsum... </div>

我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:

实例

<div class="row" data-equalizer>

<div class="medium-4 columns panel" data-equalizer-watch>

Lorem ipsum...

</div>

<div class="medium-4 columns panel" data-equalizer-watch>

Sed ut...

</div>

<div class="medium-4 columns panel" data-equalizer-watch>

Lorem ipsum...

</div>

</div>

<!-- Initialize foundation JS -->

<script>

$(document).ready(function() {

$(document).foundation();

})

</script>

---

不同屏幕的均衡器

值描述实例medium-up默认。 创建相同高度的容器，宽度大于 40.063emlarge-up创建相同高度的容器，宽度大于 64.063em尝试一下xlarge-up创建相同高度的容器，宽度大于 90.063em尝试一下xxlarge-up创建相同高度的容器，宽度大于 120.063em尝试一下

---

嵌套内容

为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。 这会一起连接到均衡器容器。 重复多次嵌套均衡器，确保他们是匹配的：

实例

<!-- The Equalized Container -->

<div class="row" data-equalizer="first">

<div class="medium-4 columns">

<div class="panel" data-equalizer-watch="first">

<h3>Panel</h3>

<!-- An Equalized Container Inside The Equalized Container -->

<div class="row" data-equalizer="second">

<div class="panel" data-equalizer-watch="second">

<h3>Nested Panel</h3>

<p>Lorem ipsum...</p>

</div>

<div class="panel" data-equalizer-watch="second">

<h3>Nested Panel</h3>

<p>Lorem ipsum...</p>

</div>

<div class="panel" data-equalizer-watch="second">

<h3>Nested Panel</h3>

<p>Lorem ipsum...</p>

</div>

</div>

<!-- End Nested Equalized Container -->

</div>

</div>

<div class="medium-4 columns">

<div class="panel" data-equalizer-watch="first">

<h3>Panel</h3>

<p>Ut enim...</p>

</div>

</div>

<div class="medium-4 columns">

<div class="panel" data-equalizer-watch="first">

<h3>Panel</h3>

<p>Lorem ipsum....</p>

</div>

</div>

</div>