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