CSS Float を使用して 2 つの Div を並べて配置するにはどうすればよいですか?

2 つの div を並べて配置する方法

2 つの div 要素を並べて配置するには、float を使用できます。 CSS のプロパティ。

親 div (#wrapper) 内で、幅を設定し、視覚的な境界線を追加します。

#wrapper {
  width: 500px;
  border: 1px solid black;
}

最初の div (#first) に固定幅を与え、境界線を適用します。

#first {
  width: 300px;
  border: 1px solid red;
}

最初の div を左にフローティングするには、次のコードを追加します。

#first {
  ...
  float: left;
}

2 番目の div (#second) は幅を指定せずにそのままにしておきますが、幅を指定します。 border:

#second {
  border: 1px solid green;
}

2 番目の div が最初の div の高さを確実に尊重するには、ラッパー div にオーバーフロー プロパティを追加します。

#wrapper {
  ...
  overflow: hidden;
}

あるいは、最初の div を両方とも浮動小数点にすることもできます。と 2 番目の div ですが、フロートされた子を含むようにラッパー div のオーバーフロー プロパティを設定することを忘れないでください:

#wrapper {
  ...
  overflow: hidden;
}

#first {
  ...
  float: left;
}

#second {
  ...
  float: left;
}

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