IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

display: table-cell を使ったマルチカラムレイアウト

Acid2 Test で

IE8 が display: table-cell をきちんとレンダリングするということが分かったので。

IE8 が普及する(笑)のを 5 年くらい先取りして

display: table-cell によるマルチカラムレイアウトを書いてみました。
リンクは以下です。
http://amachang.art-code.org/tablecell/
今のところ Opera 9+、Safari 2+、 Firefox 2+ で正常にレンダリングされることを確認しました。

ポイント

ソースを見て分かるように HTML も CSS もめちゃめちゃシンプルです。
ポイントは display: table-cell の要素が兄弟要素の高さに併せて間延びするところでしょう。
これで、何カラムだろうとお手のものです。