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 class="medium-4 columns panel"

data-equalizer-watch>

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

      <!-- End Nested Equalized Container

-->

    </div>

  <div

class="medium-4 columns">

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

  <div class="medium-4 columns">

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

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