如何创建具有均匀间隔 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中文网其他相关文章！