• RSS

[JS]高さの異なるコンテンツでもブロックレベル要素で揃える「jquery.heightLine.js」

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

レスポンシブ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 の要素横並びのデモ



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

コメント

コメントを残す

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