首頁  >  文章  >  web前端  >  CSS中如何實現div水平對齊?

CSS中如何實現div水平對齊?

DDD
DDD原創
2024-11-11 01:33:02612瀏覽

How to Achieve Horizontal Div Alignment in CSS?

CSS 中的水平 Div 對齊

使用 CSS 時,在容器內水平對齊 div 可能會帶來挑戰。預設情況下,如果浮動 div 的組合寬度超過父容器的寬度,即使容器的高度允許水平排列,浮動 div 也會垂直堆疊。

為了實現所需的水平對齊,我們可以在容器中使用內部 div足夠寬以容納所有浮動 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>

在此解中,#inner div 的寬度大於浮動 #child div 的組合寬度。因此,所有浮動的 div 在 #container div 內水平對齊,從而形成所需的佈局。

以上是CSS中如何實現div水平對齊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn