如何使用 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中文網其他相關文章！