IT戦記 このページをアンテナに追加 RSSフィード Twitter

2008-01-24

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

Acid2 Test で

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

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

display: table-cell によるマルチカラムレイアウトを書いてみました。

リンクは以下です。

http://amachang.art-code.org/tablecell/

今のところ Opera 9+、Safari 2+、 Firefox 2+ で正常にレンダリングされることを確認しました。

ポイント

ソースを見て分かるように HTMLCSS もめちゃめちゃシンプルです。

ポイントは display: table-cell の要素が兄弟要素の高さに併せて間延びするところでしょう。

これで、何カラムだろうとお手のものです。

hh 2008/01/25 00:15 Firefoxで右ボタンドラッグでカラムのサイズが変わるのは仕様ですか?

通りすがり通りすがり 2008/01/25 15:32 けっこう盲点だったりするので良いエントリーですね。

一点、table-rowがあった方がHTML的に良いと思います。

amachangamachang 2008/01/25 15:35 table-row が無いときの挙動が仕様に明示されていたので無駄な要素は書かない方針で省いてみたのですが、
やっぱりあったほうがいいですかね><?

nttkyknttkyk 2008/01/25 16:02 横から失礼します。
hさん、マウスジェスチャーでフォントサイズ変更とか指定してませんか?
私もマウスジェスチャーありならカラムのサイズ変わりましたけど、
切ったらドラッグしても何も起きませんでしたよ。

MillyCMillyC 2008/01/29 17:14 All-in-One Gestures でジェスチャの軌跡を描画中にカラムサイズが変わるようです。
描画をオフにすれば問題はでません。
AiOで修正してもらうべきことかな?

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。