如何建立具有均勻間隔 DIV 的流體寬度容器？

具有均勻間隔DIV 的流體寬度

使用者試圖建立流體寬度容器DIV，其中包含四個尺寸相等（300 像素）的子DIV x 250 像素）。要求是第一個 DIV 向左浮動，最後一個 DIV 向右浮動，其餘兩個 DIV 之間均勻分佈，同時保持反應能力。

解決方案：

考慮以下CSS 和HTML實現：

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

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

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

<div>
<p><strong>解釋：</strong></p>
<ul>
<li>#container DIV 利用text-align: justify 和 display: inline-block 屬性來對齊子 DIV。 </li>
<li>現代瀏覽器支援內聯區塊，但要確保為了跨瀏覽器相容性，我們在 IE6/7 中使用 display: inline 和 Zoom: 1。 </li>
<li>在 IE6 中，內聯塊元素的間距不正確，因此寬度為 100%，font-size: 0 和line-height: 0 修正了這個問題。 </li>
<li>類別為「stretch」的 span 元素填充容器中的剩餘空間以分配 DIV均勻地。 </li>
<li>子 DIV 設定為所需的尺寸並指定特定的背景顏色以用於演示目的。 </li>
</ul>
</div>

以上是如何建立具有均勻間隔 DIV 的流體寬度容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！