CSS で分離線を含む 2 つの同じ高さのフローティング Div を作成するにはどうすればよいですか?

CSS を使用して同じ高さの Floating 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;
}

説明:

• overflow: hidden を使用して div をコンテナ内にラップすると、フローティング div によって強制的に改行が発生します。
• 大きな下部パディングと同量の負のマージンを div に適用すると、コンテンツが垂直方向の中央に配置されたまま、高さの 100% を占めるように拡張されます。
• div を区切る線は、div の 1 つに小さなマージンまたは境界線を適用して作成されます。

これを利用することでCSS テクニックを使用すると、テーブルを使用する意味的な意味を持たずに、同じ高さの 2 つの浮動 div を作成できます。

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