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

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

- with GroveLog

以前、角丸ライブラリかなにかで、角取りつつ高さも揃える・・みたいなのがあったような気がしたのだけれど、覚えておらず。
改めてGoogleしてみたところ、よさそうなのを発見。
ただ、個人的にはｊQueryを利用しているので、ｊQuery版みたいのがあれば、そっちの方がすっきりするかなと思い、「ｊQuery　高さ揃え」で、再度Google。すると、今度はこれを発見。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。

jQueryでブロック要素の高さを揃えてみる - 徒書

- with GroveLog

今回はこっちを使うことに。
問題なくうまく行きました。一点、jqcorner.jsも併用しているのだけれど、先に.flatHeights()で高さを揃えてから、.corner("5px")としないと変なところで角丸されてしまいます。

角丸とか、高さを揃えるとか、昨今のウェブデザインではよく使う手法だけれど、普通にやろうとすると、余計なdivが増えたり、cssを多くかかないといけなかったり、どんどん複雑になる傾向があります。こうった便利なjsを使うとソースも綺麗に保てるし、なにより、ずっと楽になります。重宝します。