[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート

Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。

カラムの高さを揃えるイメージ図

Equal Height Columns with Cross-Browser CSS & No Hacks
demo: 2カラム
demo: 3カラム

以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その2つの不具合が無いものとなっています(IE7調べ)。

対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。

仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。
下記は、そのイメージです。

カラムの高さを揃えるスタイルシートの説明図

最小限にしたサンプルをアップしたので、参照ください。
高さの異なるカラムを揃えるスタイルシートのサンプル

top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

Comments

メシウマ状態 飯の旨いおかずがてんこ盛り

on 2008年11月1日

MTVが無料PVだけでなくAPIも公開した

あとで新聞 – 2008年10月31日(金)から

ネットワーク側から見たヨドバシカメラ問題 – なぷさく
ヨドバシ問題の検証・解説。こうやってチェックするのか。GIgazine にあった、数年前にヨドバ…

top of page

©2011 coliss