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

HTML/CSS で 2 つの Floating Div を同じ高さにする

はじめに

均等にするdiv の高さは、特に隣り合って異なる値を持っている場合に難しい場合があります。コンテンツの長さ。一般的な回避策の 1 つはテーブルを使用することですが、このアプローチは意味的に適切ではない可能性があります。

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

テーブルを使用せずに同じ高さを実現するには、CSSいくつかのテクニックを提供します。 1 つのアプローチには、大きな下部パディングを設定し、負の下部マージンでそのパディングを無効にし、非表示のオーバーフローを持つコンテナーで 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; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

HTML で、div コンテナと 2 つのコンテナを作成します。 child div:

<div>

このアプローチでは、たとえ含まれるコンテンツの量が異なる場合でも、基本的に 2 つの div が同じ高さになるように強制されます。大きな下部パディングと負のマージンが互いに打ち消し合うため、div は必要な垂直スペースのみを占有することができます。非表示のオーバーフローを備えたコンテナーにより、余分なコンテンツが表示されなくなります。

結論

この CSS テクニックは、HTML/ で同じ高さのフローティング div を作成する意味的に正しい方法を提供します。 CSS。不要なマークアップを導入することなく、テーブルの動作を効果的に模倣します。

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