如何使用 CSS 浮动并排放置两个 Div？

如何使用 CSS 并排放置两个 Div

在 CSS 中，可以实现 div 元素所需的垂直对齐和接近度通过各种技术。一种有效的方法是利用浮动。

使用 Float

并排浮动一个或两个内部 div 将允许它们水平对齐，而不影响相邻的布局内容。

浮动一Div

添加浮动：left；下面 CSS 中的 #first 属性会将其浮动到左侧，使其占据 #wrapper div 的左侧，而 #second 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;
}

浮动两个 Div

同时浮动 #first 和 #second 也会导致并排排列。然而，防止 #wrapper div 围绕其浮动子项收缩是至关重要的。要实现此目的，请添加溢出：隐藏；到#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 浮动并排放置两个 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！