純粋な CSS で同じ高さの列を作成するには?

CSS を使用して同じ高さの列を作成する

視覚的に魅力的なレイアウトを作成するには、同じ高さの列が不可欠です。さまざまなアプローチがありますが、効率的な方法の 1 つは純粋な CSS を使用することです。このチュートリアルでは、このテクニックをわかりやすく説明し、他のソリューションの単なる重複であるという概念を払拭します。

課題

次のような列を作成するにはどうすればよいですか?

• 親 div の垂直方向のスペース全体を埋めます
• 背景画像に依存せずに同じ高さを表示します

広範な調査に基づいて、独自のソリューションを発見しました。

答え

簡単なアプローチとして、次の CSS トリックを採用します。

.parent {
  display: table;
}
.child {
  display: table-cell;
}

このトリックは、テーブルベースの表示プロパティを利用します。親 div がテーブル表示を想定している場合、その子 div は同じ高さを継承してテーブル セルになります。

例

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

注: IE7 はこのアプローチではうまく機能しないため、下位互換性のためにより複雑なソリューションが必要です。

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