純粋な CSS で同じ高さの列を実現するにはどうすればよいですか?

純粋な CSS を使用して真に等しい高さの列を作成する方法

コンテンツの長さが異なる複数の列を操作する場合、背景画像に頼らずに同じ高さを実現するのが一般的です。チャレンジ。広範な調査を行った結果、この問題に効果的に対処する独自の CSS ソリューションを開発しました。

ソリューション

垂直方向のスペースを効果的に分散する単純化されたアプローチについては、次のプロパティの使用を検討してください。

.parent {
  display: table;
}

.child {
  display: table-cell;
}

このメソッドは、親コンテナとその子にテーブルのような構造を割り当て、それらが同じ垂直方向のスペースを占めるようにします。

互換性

このソリューションは次のことに注意することが重要です。は Internet Explorer 7 と互換性がありません。IE7 のサポートが重要な場合は、より複雑なアプローチが必要になる場合があります。

例

<div class="parent">
  <div class="child">Column 1</div>
  <div class="child">Column 2 with longer content</div>
  <div class="child">Column 3</div>
</div>

この例では、3 つの列はすべて同じになります。高さは、各列のコンテンツの長さに関係ありません。

以上が純粋な CSS で同じ高さの列を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。