レスポンシブWEBデザイン対応で、コンテンツの中身が変わっても、ブロックレベル要素の高さを揃えることができるjQueryプラグインjquery.heightLine.jsのご紹介です。
jquery.heightLine.js のダウンロード
以下のページからjquery.heightLine.jsをダウンロードします。jquery.heightLine.js
jquery.heightLine.js の設置
<head>タグ内にjqueryファイルと一緒にjquery.heightLine.jsファイルを設置します。|
1 2 3 4 5 6 7 |
<script src="./jquery.min.js"></script> <script src="./jquery.heightLine.js"></script> <script> $(function(){ $(".box-patent>.box-child").heightLine(); }); </script> |
高さを揃えたい要素をセレクタで指定します。
HTML側はこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="box-patent"> <div class="box-child">…</div> </div> <div class="box-patent"> <div class="box-child">…</div> </div> <div class="box-patent"> <div class="box-child">…</div> </div> <div class="box-patent"> <div class="box-child">…</div> </div> <div class="box-patent"> <div class="box-child">…</div> </div> … |
要素をfloatで横並びさせるなど、CSSでの調整は必要になりますが、簡単なサンプルを以下のデモページに置いていますので、是非参考にしてみてください。
jquery.heightLine.js の要素横並びのデモ
コメント