display:boxとbox-ordinal-group

CSS3にはdisplay:boxとbox-ordinal-groupという便利な記法があって、マルチカラムレイアウトっぽいことが手軽にできる。詳しくはCSS3の数行で作る簡単な3カラムレイアウトを参照。

で、サンプルを書いてみた。

Google Chrome で表示すると次のようになる。

floatを使う必要がないのが嬉しい。

追記

CSS3の数行で作る簡単な3カラムレイアウトを見ると、複数ブラウザに対応する場合にはbox-sizingも考慮する必要があるみたい。