Foundation 均衡器(Equalizer)

最后更新于：2022-03-27 01:35:10

Foundation 均衡器(Equalizer)

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

注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation 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>

尝试一下 »

不同屏幕的均衡器

在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一：

值	描述	实例
`medium-up`	默认。创建相同高度的容器，宽度大于 40.063em
`large-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>

尝试一下 »