CSS のみを使用して Floating Div を同じ高さにするにはどうすればよいですか?

HTML/CSS での Floating Div の高さの不一致を修正する

Web 開発の領域では、Floating Div を操作するときに次のような共通の課題が発生します。それらが同じ高さに揃っていることを確認します。この難題は HTML テーブルを使用して解決されることがよくありますが、セマンティックな正確性についての懸念は依然として残ります。

推奨される解決策は CSS の力の中にあります。スタイルの特定の組み合わせを実装することで、同じ高さの浮動 div を実現できます:

1. Overflow Hidden: overflow: hidden を使用して親 div 内で div をラップします。これにより、div が指定された領域内に制限され、境界を超えて広がることがなくなります。
2. 下部パディングと負のマージン: 500em などの十分な下部パディングを div に適用します。これにより、div の下に大きな仮想スペースが作成されます。
3. 負の下マージン: パディング値に等しい負のマージンを追加します。これにより、div が上に移動し、基本的にパディングがオフセットされます。

次の CSS スニペットは、このアプローチの例です。

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

この手法を採用することで、フローティング div が自動的に調整されるようにすることができます。最も高いコンテンツに合わせて高さを調整し、心地よい視覚的な一貫性を生み出します。

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