[意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box | Cappee Design

あとで読みたい人は… こんにちは、@cappeeです。 サイトを3カラムで作る場合は通常floatを使いますよね？ 今回は意外と知らないCSS？かもしれない、floatを使わずにレイアウトできる display:box をご紹介します。 display:box とは CSS3の display:box を使えば一瞬にして3カラムのレイアウトをすることが可能です。 もうfloatのclearになんか悩まされることもありません。 display:box のすごいところは、横並びでレイアウトしたい要素の「親要素」にだけ記述すれば勝手に横並びにしてくれます。 プレフィックスを入れてもたった2行でできてしまうのです。 Flexible Box（フレキシブルボックス）とも言います。 display:box の記述方法 #contents の中に横並びにしたい要素を入れたとします。 下記の2行を追加す

[Dhio]

“display: -webkit-box; /* Safari,Google Chrome用 */ display: -moz-box; /* Firefox用 */”