コンテンツの高さと幅を揃えるなら eqaulize.js

cap2

equalize.jsはコンテンツの高さと幅を揃えてくれるjQueryプラグインです。使用方法も簡単です。
dviやpタグなどを揃えることができます。

スポンサーリンク

導入

jqueryと一緒に読み込みます。

 高さを揃える

一番高い要素の高さに合わせます。
揃えたい要素の親要素(下記の場合は「#height-example」)をセレクタで指定します。

equalize.js適用前(高さがバラバラ)

cap3

equalize.js適用後(高さが揃った)

cap4

横幅を揃える

一番広い横幅に合わせます。
揃えたい要素の親要素(下記の場合は「#width-example」)をセレクタで指定します。

equalize.js適用前(横幅がバラバラ)

cap5

equalize.js適用後(横幅が揃った)

cap6

オプション1(デフォルト値をリセットして高さと横幅を揃える)

「reset: true」を指定すると、要素に設定されている高さの値を一度リセットして、再度要素の高さを取得します。

横幅の場合はこのように指定します。

equalize.js適用前(高さがバラバラ)

普通に高さを合わせると、真ん中の一番高い要素に高さが揃ってしまいます。
「reset: true」を指定しているので、一度すべての高さをリセットしてから、要素の高さを取得し直して一番高い高さに合わせます。

cap8

equalize.js適用前(高さが揃った)

cap9

オプション2(outer、innerの指定)

outerHeightやinnerHieght、outerWidthやinnerWidthを指定することもできます。

オプション3(子要素を指定)

「children: ‘要素’」 で対象の子要素を指定することもできます。下記の場合は、.parentの中のpタグが対象になります。

スポンサーリンク
eqaulize.js – コンテンツの高さと幅を揃えるなら

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2014.06.17
  • Views 1,175