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

metal.izeにエントリーされていたスタイルシートを紹介します。

Columnas 100% altasのキャプチャ

Columnas 100% altas

Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。
sample:高さがばらばらのdiv
sample:高さが揃ったdiv

スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。
詳しくは、最小限にしたサンプルを作成したので参照ください。
高さの異なるカラムを揃えるスタイルシートのサンプル

下記の「32768px」って、何か特別な意味があるのでしょうか。

padding-bottom: 32768px;
margin-bottom: -32768px;

Columnas 100% altas:P-4

top of page

©2016 coliss