如何使用 CSS 建立具有等距 DIV 的流體佈局？

等距 DIV 的流體寬度

要實現等距 DIV的流體佈局，可以使用以下方法：使用：

CSS

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

這將文字對齊方式設定為“對齊”，使內容均勻分佈在可用寬度上。

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  vertical-align: top;
}

透過設定display: inline-block，DIV 將表現為內聯元素，在

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

添加一個「拉伸」元素來填充剩餘空間並將DIV 推到所需的位置。清除字體和行高在某些瀏覽器中會有所幫助。

HTML

<div>

stretch 元素可確保 DIV 在流體容器中均勻且響應靈敏地分佈。

以上是如何使用 CSS 建立具有等距 DIV 的流體佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！