SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

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

下揃え

下揃え

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

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;">境界線をつけてみました1それぞれ幅は変えてみました1</div>
 <div style="border:1px solid #c00; width:140px;">境界線をつけてみました2 境界線をつけてみました2 境界線をつけてみました2 境界線をつけてみました2</div>
 <div style="border:1px solid #c00; width:150px;">境界線をつけてみました3</div>
</div>
境界線をつけてみました1それぞれ幅は変えてみました
境界線をつけてみました2 境界線をつけてみました2 境界線をつけてみました2 境界線をつけてみました2
境界線をつけてみました3

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

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

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

関連するメモ

コメント