CSSで内容量が異なるボックスの高さを揃える

テーブルでレイアウトを組んでいたときは意識すらしなかった、「内容量の違うボックスの高さを揃える」ということが、テーブルを使わないと急に難しくなります。

どういうケースでそうなるかというと、ウチのサイトのリンクページが良い例です。
一つの記事が矩形の小さなボックスになっていて、これを、float; left で並べています。
内容量がだいたい同じくらいのときは問題ないのですが、極端に内容量が違うとき、一つの記事の隣に二つの記事が回り込んだりしてしまいます。

もちろん、height で高さを指定してやれば揃う訳ですが、テーブルレイアウトのときは内容量に合わせて高さがいい感じになるのに、CSSでは固定高になってしまう(十分な高さにすると余白が出すぎる)というのはどうかと思いますよね。

そこで、魔法の呪文みたいな設定があります。

ネタ元はここ
[CSS]高さの異なるカラムを揃えるスタイルシート

解説すると、各ボックスをdivで囲んで、そのdivに対して「padding-bottom」にプラス、「margin-bottom」に同じ数値をマイナスで指定を行い、それらをさらにdivで囲んで「overflow:hidden;」を指定します。

HTML
<div class=”column”>
 <div class=”box”>・・・</div>
 <div class=”box”>・・・</div>
 <div class=”box”>・・・</div>
</div>

CSS
.column {
overflow: hidden;
}
.box {
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}

32768という数値に意味があるかどうかはよくわかりません(笑)

通常のサイトなら、これで良いのですが、実は Movable Type にはこのまま適用することが出来ません。
ボックスを1列ごと(たとえば3つごと)にdivで囲まなければならないのに、<MTEntries>などのMTタグでは、そんなことはできないのです。

というわけで、続きは次の記事で

この記事を書いた人

川井 昌彦
川井 昌彦
FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数

ご質問・ご相談などありましたら
お気軽にお問い合わせください


“CSSで内容量が異なるボックスの高さを揃える” への1件のコメント

  1. さくらぎけいのアバター
    さくらぎけい

    すでに新しい手法が公開されています。
    こちらの手法のほうが良さそうなので、今度チャレンジしてみます。
    [CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート
    http://coliss.com/articles/build-websites/operation/css/1591.html

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Vektor Passport(ライセンス期間1年)
VK Filter Search Pro
Vektor WordPress Solutions
PAGE TOP