CSS で 2 つの Floating Div を同じ高さにするにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS で 2 つの Floating Div を同じ高さにするにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-15 01:43:14

オリジナル

127 人が閲覧しました

How to Make Two Floating Divs the Same Height with CSS?

CSS を使用した同じ高さの Floating Div

同じ高さを共有し、それらを区切る線を持つ 2 つの Floating Div を実現したいと考えています。テーブルは便利なソリューションを提供しますが、セマンティック上の理由から、CSS の代替手段が求められます。

列の高さを均等にする鍵は、広範囲にわたる下部パディングと負の下部マージンを採用することにあります。さらに、列はオーバーフローを非表示にした 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;
}

ログイン後にコピー

この CSS を使用すると、高さを簡単に揃えることができます。フローティング div を使用して、視覚的に魅力的なレイアウトを作成します。

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