首頁 > web前端 > css教學 > 如何創建具有等間距 DIV 的流體寬度容器?

如何創建具有等間距 DIV 的流體寬度容器?

DDD
發布: 2024-12-21 08:15:18
原創
703 人瀏覽過

How to Create a Fluid Width Container with Equally Spaced DIVs?

具有等距 DIV 的流體寬度

挑戰是創建一個具有四個等距 DIV 的流體寬度容器。 DIV 應水平對齊,DIV 1 向左浮動,DIV 4 向右浮動,DIV 2 和 3 位於兩者之間。此外,間距應該會隨著瀏覽器大小的調整而動態調整。

為了實現這一點,我們可以利用 CSS 屬性 text-align: justify 和 display:內聯區塊。程式碼如下:

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}
登入後複製

說明

  • #container 元素設定為 text-align: justify。這會強製文字擴展以填充容器寬度。
  • 每個 .box 元素都設定為 display: inline-block。這使得它們的行為類似於內聯元素,但具有固定的寬度和高度。
  • .stretch 元素充當 .box 元素之間的間隔符號。它被設定為 width: 100%;,拉伸它以填充剩餘空間。
  • font-size: 0; line-height: 0 修正了 IE6 中的問題。

調整瀏覽器大小時,.stretch 元素會調整其寬度以保持 .box 元素之間的間距,從而形成流暢的佈局。

以上是如何創建具有等間距 DIV 的流體寬度容器?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板