CSS だけで複数の box の高さをそろえる方法についての demo と解説です。この方法では JavaScript は使用しません。

テキストが数行程度の box に限定されてしまいますが、JavaScript のエラーの心配がなかったり、JavaScript を無効にしている環境にも対応します。

• 動作確認用の demo

box の高さが変わる要因のほとんどは、テキストの量によるものなので、テキストの入るp要素などにheightをemで指定します。max で 3 行とするなら

div.sample p.sampleText{
height:4.8em;
line-height:1.1;
overflow:hidden;
}

のように指定します。

1 行の高さは 1.1 em、box の高さは 4.8 emで 3 行分 + バッファを指定します。
em で高さを指定しているので、フォントの違いや文字をある程度拡大して行が増えた場合にも対応できます。
あまり文字サイズを拡大すると崩壊してしまいますので、overflow : hidden も指定しておきます。
切れて見えなくなるのは良くない !! という時には overflow : auto; などを指定してください。

トラックバックURI

http://www.yomotsu.net/lab/css/layout_same-height/trackback

実験室に戻る

Web サイト内検索