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八王子など登壇多数

最新の投稿

• 技術記事2025年3月7日WordPressに百千鳥フォントを入れて遊んでみました
• ブログ2025年1月3日移転のお知らせ（2024年）
• 日記2024年12月24日2024年もベクトルさんの質問相談会に助けられました
• 日記2024年12月19日2024年、買ってよかったThinkPad

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

資料を請求する

お問い合わせはこちら

資料請求・お問い合わせにはメールアドレスが必要です