純粋な CSS を使用して高さの等しいフローティング Div を作成するにはどうすればよいですか?

HTML/CSS での同じ高さの Floating Div の作成

Floating Div を使用する場合、それらの間で同じ高さを維持するのが難しい場合があります。ディビジョンテーブルは単純なソリューションではありますが、意味的に必ずしも適切であるとは限りません。幸いなことに、これを実現するための純粋な CSS テクニックがあります。

1 つのアプローチは、div に下パディングと負の下マージンを適用することです。パディングは垂直方向のスペースの外観を作成しますが、マージンはこのパディングを打ち消します。これを利用して、同じ高さの列を作成できます。

さらに、overflow: hidden を使用して親コンテナ内の div をラップすると、コンテンツがコンテナの外にオーバーフローするのを防ぐことができます。これは、垂直方向の配置を維持するのに役立ちます。

div 内のテキストを垂直方向の中央に配置するには、行の高さまたはフレックスボックス手法の使用を検討してください。たとえば、行の高さを大きな値に設定するか、フレックスボックスを使用して項目を中央に配置すると、垂直方向の配置を実現するのに役立ちます。

以下のコード サンプルは、この手法を示しています。

#container {
  overflow: hidden;
}
#left-col {
  float: left;
  width: 50%;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px;
  border-left: 1px solid black;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

これこのアプローチは、HTML/CSS で同じ高さのフローティング div を作成するクリーンで意味的に適切な方法を提供します。

以上が純粋な CSS を使用して高さの等しいフローティング Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。