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

Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。
ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。


このライブラリは新バージョンがあります。
レスポンシブWebデザインに対応した「jquery.heightLine.js」


CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。

この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』というクラス名をつけると、その要素の、子供の要素の高さを統一することができます。

サンプル

ライセンス

MIT-Licenseで公開・配布しております。

バグ・不具合・要望等ありましたら、コメント欄よりお願いします。

更新情報等を配信するFeedシステムを作ってるので、それができたら公開や公開後のフォローなどもスムーズに行くかもと考えているのですが・・・

更新履歴


2007/9/24 safariで動作しない、borderを指定しない場合のieでのバグを修正しました。
2007/9/24 高さの算出の精度を上げました。
2007/8/3 prototype.jsのobjectオブジェクト汚染に対応

関連エントリー

ページ内リンクをスマートにするsmoothScroll.js
ie以外でもクリップボードが使えるsetClipboard.js
一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
Lightboxを使い画像を拡大表示する。
角丸javascriptライブラリ『curvyCorners』を使ってみる
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
クロスフェードを実装する為のCrossfader

スポンサードリンク

«クロスフェードを実装する為のCrossfader | メイン | クリエイティブ・コモンズは万能ではない»