ブロックレベル要素の高さを揃える「Equal Heights」

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

ブロックレベル要素の高さを揃える「Equal Heights」

配布元:The EqualHeights jQuery Plugin
ライセンス:不明

EqualHeights jQuery Pluginはブロックレベル要素の高さを揃えるJavaScriptライブラリです。

Equal Heightsの使い方

head要素などでダウンロードしたjquery.equalheights.jsとjquery.jsを読み込みます。

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

その後に高さを揃えたい要素、CSSセレクタで指定しequalHeights()を実行します。

<script type="text/javascript">
$(document).ready(function() {
	$("CSSセレクタ").equalHeights()
});
</script>

これで、高さが揃えられます。

サンプル

equalHeightsを指定しておくことにより、最小の高さや最大の高さを指定することが出来ます。

$("CSSセレクタ").equalHeights(最小の高さ,最大の高さ)

文字サイズなどを変更したり、内容が最大の高さを超えた場合はスクロールバーが表示されます。

同じようなスクリプトに「heightLine.js」があります。heightLine.jsは文字サイズを変更した際に高さを再調整します。

スポンサードリンク

コメント

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