首页 >web前端 >css教程 >如何创建具有均匀间隔 DIV 的流体宽度容器?

如何创建具有均匀间隔 DIV 的流体宽度容器?

Linda Hamilton
Linda Hamilton原创
2024-12-27 17:35:11843浏览

How to Create a Fluid-Width Container with Evenly Spaced DIVs?

具有均匀间隔 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>

解释:

  • #container DIV 利用 text-align: justify 和 display: inline-block 属性来对齐子 DIV。
  • 现代浏览器支持内联块,但要确保为了跨浏览器兼容性,我们在 IE6/7 中使用 display: inline 和 Zoom: 1。
  • 在 IE6 中,内联块元素的间距不正确,因此宽度为 100%,font-size: 0 和line-height: 0 修复了这个问题。
  • 类为“stretch”的 span 元素填充容器中的剩余空间以分配 DIV均匀地。
  • 子 DIV 设置为所需的尺寸并指定特定的背景颜色以用于演示目的。

以上是如何创建具有均匀间隔 DIV 的流体宽度容器?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn