floatなどで横に並べたブロック要素の高さを揃えることができるjQueryプラグインjQueryAutoHeightのご紹介です。
jQueryAutoHeightは、複数並んだブロック要素を高さの最大値で揃えて表示できるだけでなく、ブロック要素を横に何個並べるか？というカラムの指定もできますので、レイアウトの自由度も高くて非常に便利なプラグインです。
jQueryAutoHeight のインストール
以下のページよりjQueryAutoHeightのファイルをダウンロードします。http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html
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 でカラムを指定するデモ
コメント