• RSS

[JS]複数並んだブロック要素の高さを最大値で揃えるjQuery プラグイン「jQueryAutoHeight」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

float などで横に並べたブロック要素の高さを揃えることができるjQuery プラグイン「jQueryAutoHeight」のご紹介です。

jQueryAutoHeight は、複数並んだブロック要素を高さの最大値で揃えて表示できるだけでなく、ブロック要素を横に何個並べるか?というカラムの指定もできますので、レイアウトの自由度も高くて非常に便利なプラグインです。

jQueryAutoHeight のインストール

以下のページより jQueryAutoHeight のファイルをダウンロードします。


jQueryAutoHeight の設定

jquery と一緒に jQueryAutoHeight ファイルを設置します。

今回は、.block 要素をfloat で横に並べるようなサンプルを作っていくことにします。


float で並べるブロック要素の記述例

まずはCSS の記述例から。

続いてHTML 側の記述例です。
要素の高さに差を出す為に、長文のダミーテキストも混ぜ込んでいます。

.block 要素に対して高さを指定していませんが、一番高さのある要素に揃って並びます。

jQueryAutoHeight のデモ


カラムを指定

jQueryAutoHeight のオプションとして、カラムを指定することができます。

column:4 とすることで、横に4 個並んだブロック要素が高さの最大値で揃って表示されます。

jQueryAutoHeight でカラムを指定するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください