同じ高さでコンテンツを作成するためにイコライザを使用します：
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
Lorem ipsum...
同じ高さのコンテナを作成するには、コンテナ要素に data-equalizer 属性を追加し、
同じ高さを持つ必要の各子要素に data-equalizer-watch 属性を追加します。
最も高い要素が、他の要素の高さを決定します。
注: 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>
結果：
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
I am the tallest element. The other elements use my height.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
Lorem ipsum...
イコライザが、異なる画面サイズ用に同じ高さのコンテナを作成する必要があるとき、決定のために
data-equalizer-mq="value" 属性を追加します。以下の値のいずれかを指定します：
| 値 | 説明 | 例 |
|---|---|---|
medium-up |
デフォルト。 40.063em よりも広い画面に同じ高さのコンテナを作成する | |
large-up |
64.063em よりも広い画面の同じ高さのコンテナを作成する | Try it |
xlarge-up |
90.063em よりも広い画面の同じ高さのコンテナを作成する | Try it |
xxlarge-up |
120.063em よりも広い画面の同じ高さのコンテナを作成する | Try it |
<!-- Create
an equal height container for screens wider than 90.063em -->
<div class="row" data-equalizer
data-equalizer-mq="xlarge-up">
..
</div>
結果 - 効果を確認するために、ブラウザウィンドウのサイズを変更してください：
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
I am the tallest element. The other elements use my height.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
Lorem ipsum...
Try it Yourself »
一致する 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>
結果：
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum....