【CSS】スタイルシートで下揃え

Tweet

Category css 2010/03/07

こんなレイアウトをしたい。

下揃え

スタイルシートで下揃えできる？

displayl:table-cell で vertical-align が効くようにする

style=”displayl:table-cell;”を指定すると、vertical-align が効いて、上揃え、中央揃え、下揃えが可能になる。

displayl:table-cell はIE6、IE7では無視されるので、IE6、IE7用の条件分岐コメントやCSSハックが必要となる。やむをえないか……

サンプル

<style type="text/css">
.sample20100307 div {display:table-cell; vertical-align:bottom;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.sample20100307 div {display:inline; zoom:1;}
</style>
<![endif]-->
<div class="sample20100307">
 <div style="border:1px solid #c00; width:100px;">境界線をつけてみました１それぞれ幅は変えてみました１</div>
 <div style="border:1px solid #c00; width:140px;">境界線をつけてみました２ 境界線をつけてみました２ 境界線をつけてみました２ 境界線をつけてみました２</div>
 <div style="border:1px solid #c00; width:150px;">境界線をつけてみました３</div>
</div>

境界線の表示のされ方はブラウザによって異なります。まさにテーブルのセルのように並んだり、それぞれ違う高さになったりします。

displayl:table-cell って、見るからに「table の中の td と同じことができるように」という雰囲気ですね。

妙な技で無理しないで、素直に table 使おうよ…という気分になります。