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

CSS を使用して 2 つの Div を並べて配置する方法

CSS では、必要な垂直方向の配置と div 要素の近接を実現できます。さまざまなテクニックを通して。効果的なアプローチの 1 つは、フローティングを利用することです。

Float を使用する

内側の div の 1 つまたは両方を並べてフローティングすると、隣接する div のレイアウトに影響を与えることなく、それらを水平方向に整列させることができます。コンテンツ。

フローティング ワンDiv

float の追加: left;以下の CSS で #first プロパティを #first に設定すると、それが左にフローティングされ、#wrapper div の左側を占めることになりますが、#first div は右側に残ります。

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  overflow: hidden;
}

Floating両方の Div

#first と #second の両方をフロートすると、横並びの配置になります。ただし、#wrapper div がそのフローティングされた子の周りで縮小しないようにすることが重要です。これを実現するには、overflow: hidden; を追加します。 #wrapper に追加し、両方の浮動要素が含まれていることを確認します。

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  float: left;
}

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