floatで寄せてるブロック要素の高さをそろえるjsライブラリ「heightLine.js」

クルマの買い替えでホンダのストリームを購入したら、それまで両天秤で悩んでいたオデッセイがほんとにどうでもよくなったフジカワです。人間って便利に出来てるなぁ。
購入したストリームは安易に「スー」と命名。ちなみに二代目の「スー」です。初代は昔オーストラリアで買ったHOLDEN社のcommodore(乗ってたモデルはこれ)。名前の由来は当時のクラスメイトにスイス人のスーというかわいい子がいたからですいません。
35万キロ走ったのを2,000AUSドルで購入し、半年で3万キロ上乗せて1,000AUSドルで売りました。しかし今だに売却金は受け取れていません。今思い出しました(笑)。

みんなが欲しいと思っていたに違いない。

さてやっと本題。いつもくだらない前置きですいません。僕的はこれが本題みたいなところもありまして。
これはto-Rさんのエントリ
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
を見ていただければ全てが分かるのですが、本当に便利。
今では色々とCSSでも工夫できるようになっているので、他にも方法はいくつかあると思いますが、これが一番簡単な解決策だと思います。少しでも多くの方が使えるようになればと思い、お粗末ながらここでも紹介させていただきます。

使い方

1.こちらからheightLine.jsをダウンロード
2.使いたいページのhead要素で読み込み

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

3.統一したいブロック要素に”heightLine”というclassを指定。
これでOK。このclass指定があるブロック要素の中で、一番高さがあるものに他のものも自動的に統一されます。

かゆいとこまで手が届く

さらにちょっとアドバンス的使い方。
1.複数グループに分ける
ブロック群によってそれぞれに高さを変えることができます。そろえたい要素群にそれぞれ、
“heightLine-group1″
“heightLine-group2″
等、heightLineの後ろに”-(ハイフン)”をつけてお好きなグループ名をつければOK。
グループごとにそのグループ内で一番高さのあるブロック要素に高さをそろえることができます。
2.親要素だけに指定する
そろえたいブロック要素群をくくっている親要素に”heightLineParent”というclassを指定すると、子要素(そろえたいブロック要素群)の高さを統一することができます。

他にも

上記使い方のサンプルやライセンス等に関しての詳しい情報などもありますので、
気になる方は是非一度ご覧になってみてください。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]

コメントを残してみる

コメント