CSS を使用して同じ高さを実装する columns_html/css_WEB-ITnose

要件

横に3つのブロックがあり、ブロックの内容は多かれ少なかれあります。高さを設定しないと、高さが変化します。ここで、3 つの水平ブロックが同じ高さであることが必要であり、その高さは最も高いブロックの高さに等しいです。

方法 1

テーブル レイアウトを使用します。表では、同じ行のセルの高さは同じです。

方法 2

は次のとおりです:

https://jsfiddle.net/maydayuiui/0rydnyv7/

Padding-bottom を設定してブロックの高さを広げ、ブロックをコンテンツの高さよりもはるかに大きくします。次に、ブロックの高さが設定されていない場合は、ブロックの高さを計算するときに、padding-bottom margin-bottom とコンテンツの高さを使用して高さを計算します。 margin-bottom を負の値に設定すると、絶対値は padding-bottom と等しくなります。計算された高さはコンテンツの高さと同じです。このとき、最も高いブロックの高さが親要素の高さになります。子要素の表示効果にはパディング効果が含まれます。最後に、親要素にoverflow:hiddenを設定して、最上位の子要素の高さを超える部分を非表示にします。