高さの異なるカラムをそろえるスタイルシート ネタ元:高さの異なるカラムを揃えるスタイルシート[コリス] 高さの異なるカラムをそろえるのがはやっているようですので、色々考察。 高さの異なるカラムをそろえる一般的な手法は、親要素の背景に画像を設定し、高さが揃っているように見せかける方法です。 まず、高さがバラバラの場合のサンプル。 次に、高さをそろえたサンプル。 こちらの方がネタ元より若干、汎用性が高い。 例えば、カラムの下を角丸でそろえることも可能です。サンプル ネタ元ですが、ネガティブマージンを使った手法でボックスの領域を超えて背景画像を表示する形で、高さをそろえているように見せかかけています。 図解するとこんな感じ、 『カラムの内容領域の高さ』に対して、『padding-bottomにより背景画像の表示領域を拡大』し、『カラムの実際の高さ』は、『margin-bottomにより縮小』させ