ブロックレベル要素の高さを揃えるheightLine.js

Check このエントリーをはてなブックマークに追加

配布元：[to-R]とあるWEBクリエイターのblog
ライセンス：MIT-License

heightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、ライブラリになります。

設置方法

head要素内にダウンロードしたheightLine.jsを読み込みます。

<script type="text/javascript" src="./heightLine.js"></script>

これだけで設置は終了です。

使い方1

統一したいブロックレベル要素に『heightLine』というclass名を付けます。
そうすれば『heightLine』というclass名が付けられたブロックレベル要素が(高さが最も高いものに)統一されます。

サンプル

使い方2

『heightLine-group1』
『heightLine-group2』

などのように、heightLineの後ろに-(ハイフン)で続けてグループ名(好きなものをつけて下さい)を指定することにより複数のグループで高さを統一することができます。

サンプル

使い方3

『heightLineParent』というクラス名をつけると、その要素の、子供の要素の高さを統一することができます。

サンプル

スポンサードリンク

コメント

カテゴリー：ライブラリ 製作補助系