[JS]複数並んだブロック要素の高さを最大値で揃えるjQuery プラグイン「jQueryAutoHeight」
スポンサード
スポンサード
float などで横に並べたブロック要素の高さを揃えることができるjQuery プラグイン「jQueryAutoHeight」のご紹介です。
jQueryAutoHeight は、複数並んだブロック要素を高さの最大値で揃えて表示できるだけでなく、ブロック要素を横に何個並べるか?というカラムの指定もできますので、レイアウトの自由度も高くて非常に便利なプラグインです。
jQueryAutoHeight のインストール
以下のページより jQueryAutoHeight のファイルをダウンロードします。jQueryAutoHeight の設定
jquery と一緒に jQueryAutoHeight ファイルを設置します。1 2 3 4 5 6 7 | <script src="./jquery.min.js"></script> <script src="./jQueryAutoHeight.js"></script> <script> $(function(){ $('.block').autoHeight(); }); </script> |
今回は、.block
要素をfloat で横に並べるようなサンプルを作っていくことにします。
float で並べるブロック要素の記述例
まずはCSS の記述例から。1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .contents { width:auto; } .contents .block { float: left; display:block; width: 130px; margin:4px 3px; padding:5px; background:#f9f9f9; font-size:90%; border:1px solid #ccc; } |
続いてHTML 側の記述例です。
要素の高さに差を出す為に、長文のダミーテキストも混ぜ込んでいます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="contents"> <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="block">テキストテキストテキストテキストテキストテキスト</div> <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="block">テキストテキストテキスト</div> <div class="block">テキストテキストテキストテキストテキストテキストテキスト</div> <div class="block">テキストテキストテキストテキスト</div> <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="block">テキストテキストテキストテキストテキスト</div> <div class="block">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> </div> |
.block
要素に対して高さを指定していませんが、一番高さのある要素に揃って並びます。
jQueryAutoHeight のデモ
カラムを指定
jQueryAutoHeight のオプションとして、カラムを指定することができます。1 2 3 4 5 6 7 8 9 10 | <script src="./jquery.min.js"></script> <script src="./jQueryAutoHeight.js"></script> <script> $(function(){ $('.block').autoHeight({ column:4, clear:1 }); }); </script> |
column:4
とすることで、横に4 個並んだブロック要素が高さの最大値で揃って表示されます。
jQueryAutoHeight でカラムを指定するデモ
スポンサード
コメント