Latest web development tutorials

財団イコライザー（イコライザー）

私たちは、コンテナ要素の追加することができdata-equalizer特性を、各サブ要素に追加data-equalizer-watch同一の高さイコライザーを作成するには、プロパティ。 最高の要素が他の要素の高さを決定します。

注：スライダはJavaScriptが必要です。 だから、oundationのJSを初期化する必要があります。

例

<DIVクラス= "行"データ -equalizer>
<DIVクラス=「中4列パネル「データイコライザウォッチ>
イプサムLoremの...
</ DIV>
<DIVクラス=「中4列パネル「データイコライザウォッチ>
セッドUT ...
</ DIV>
<DIVクラス=「中4列パネル「データイコライザウォッチ>
イプサムLoremの...
</ DIV>
</ DIV>

<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>

»をお試しください

イコライザー異なる画面

追加することにより、イコライザオンdata-equalizer-mq=" value " MQの異なる画面サイズに対して同じ高さに設定された属性を。 値は次のいずれかになります。

値 説明 例
medium-up デフォルト。 同じコンテナの高さを作成し、40.063emよりも大きな幅
large-up 同じコンテナの高さを作成し、64.063emよりも大きな幅 試します
xlarge-up 同じコンテナの高さを作成し、90.063emよりも大きな幅 試します
xxlarge-up 同じコンテナの高さを作成し、120.063emよりも大きな幅 試します

ネストされたコンテンツ

data-equalizerおよびdata-equalizer-watchプロパティの値と同じ値を追加します。 これは、等化器容器に一緒に接続することができます。 繰り返しネストされたイコライザー、それらが一致していることを確認してください。

例

<！ -イコライズコンテナ- >
<DIVクラス= "行"データ -equalizer = "最初">
<DIVクラス=「中4列">
<DIVクラス= "パネル"データ "最初" -equalizerウォッチ=>
<H3>パネル</ H3>

<！ -イコライズ容器内のザ・イコライズコンテナ- >
<DIVクラス= "行"データ -equalizer = "秒">
<DIVクラス= "パネル"データ "秒" -equalizerウォッチ=>
<H3>ネストされたパネル</ H3 >
<P> Loremのイプサム... </ P>
</ DIV>
<DIVクラス= "パネル"データ "秒" -equalizerウォッチ=>
<H3>ネストされたパネル</ H3 >
<P> Loremのイプサム... </ P>
</ DIV>
<DIVクラス= "パネル"データ "秒" -equalizerウォッチ=>
<H3>ネストされたパネル</ H3 >
<P> Loremのイプサム... </ P>
</ DIV>
</ DIV>
<！ -エンドネストされたイコライズコンテナ- >

</ DIV>
</ DIV>
<DIVクラス=「中4列">
<DIVクラス= "パネル"データ "最初" -equalizerウォッチ=>
<H3>パネル</ H3>
<P>ユタenim ... </ P>
</ DIV>
</ DIV>
<DIVクラス=「中4列">
<DIVクラス= "パネル"データ "最初" -equalizerウォッチ=>
<H3>パネル</ H3>
<P> Loremのイプサム.... </ P>
</ DIV>
</ DIV>
</ DIV>

»をお試しください