floatを使ったカラムの高さを揃える

2014/09/13

floatを使った複数カラムレイアウトの場合、内容の少ないカラムのバックグラウンドカラーや境界線などが抜けてしまう。

解消するにはいろいろなテクニックがあるようだが、極く簡単に高さを揃えてくれるJavaScriptがあることを知った。ヘッダ部で下のようにJavaScriptを読み込んでおき、

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

揃えたいカラム（ブロック）に、heightLine というclass名を付ける、あるいは親要素にheightLineParentというclass名を付けるだけでよい。

Ida Qitailang