雨と風と快晴と 2.0

個人の勉強とPCライフに役立つツールをめざすブログ。
個人としてはWebクリエイターとして活躍中(?)。

広告

※このエリアは、60日間投稿が無い場合に表示されます。記事を投稿すると、表示されなくなります。

3段組にする便利なスタイルシート display : table-row 、table-cell

2008年03月07日 | ひとまず。
3段組にする便利なスタイルシート。
displayプロパティで、以下のように設定する。

並べたい3つのカラム全体を包むラッパークラスに、table-row を設定。
.wrapper {
display : table-row;
}
並べたい3つのカラムに、table-cell を設定。
.left , .center, .right {
display : table-cell;
}

これにより、htmlのtableタグの代わりをしてくれる。
FireFox、Operaなどではうまく表示されるが、残念ながら、IE6,7等ではうまく表示されない。
IE8以降で実装されるそうだから、あと2,3年すれば、この方法が主流になるそうだ。


3カラムのサンプルサイト
http://www.sitepoint.com/examples/3col.html
ジャンル:
ウェブログ
コメント   この記事についてブログを書く
この記事をはてなブックマークに追加
« エクスプローラをタブで扱う。 | トップ | プロの技 Speed Painting! »
最近の画像もっと見る

コメントを投稿

ひとまず。」カテゴリの最新記事