如何在固定大小的容器內水平對齊浮動 Div？

水平對齊浮動 div

使用固定大小且隱藏溢出的容器 div 時，水平對齊浮動 div 可能是一個挑戰。預設情況下，浮動 div 在到達其父級的右邊界時將換行到下一行，即使上面有可用空間也是如此。

所需外觀

所需外觀是一排水平的 div在容器內，防止它們纏繞成多行。帶有空格的內聯元素：no-wrap 可以實現這一點，但它不適合浮動的區塊級元素。

解決方案

為了解決這個問題，您可以在具有足夠寬度來容納所有浮動 div 的容器。透過將容器和內部div的overflow屬性設定為hidden，可以防止div溢出指定區域。

範例程式碼

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

以上是如何在固定大小的容器內水平對齊浮動 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！