如何创建具有等间距 DIV 的流体宽度容器？

具有等距 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中文网其他相关文章！