html - 等距 DIV 的流体宽度

Question

我有一个流体宽度的容器 DIV。

在这里面我有 4 个 DIV，都是 300px x 250px...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

我想要将框 1 向左浮动，框 4 向右浮动，框 2 和 3 在它们之间均匀间隔。我希望间距也是流畅的，以便浏览器越小，空间也越小。

Answer 1

参见: http://jsfiddle.net/thirtydot/EDp8R/

• 这适用于 IE6+ 和所有现代浏览器!
• 我已将您要求的尺寸减半，以便于使用。
• text-align: justify 结合 .stretch 处理定位。
• display:inline-block; *显示:内联； zoom:1 修复了 IE6/7 的 inline-block，see here .
• 字体大小:0； line-height: 0 修复了 IE6 中的一个小问题。

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

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

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

多余的span(.stretch)可以替换为:after。

在与上述解决方案相同的所有浏览器中，这仍然有效。 :after 在 IE6/7 中不起作用，但他们使用的是 distribute-all-lines，所以没关系。

参见: http://jsfiddle.net/thirtydot/EDp8R/3/

:after 有一个小缺点:要使最后一行在 Safari 中完美运行，您必须小心 HTML 中的空格。

具体来说，这是行不通的:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

确实如此:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

---

您可以将其用于任意数量的子 div，而无需通过更改为每个子添加 boxN 类

.box1, .box2, .box3, .box4 { ...

到

#container > div { ...

这将选择 #container div 的第一个子元素的任何 div，并且在它下面没有其他子元素。要概括背景颜色，您可以使用 CSS3 nth-order selector ，尽管它仅在 IE9+ 和其他现代浏览器中受支持:

.box1, .box3 { ...

变成:

#container > div:nth-child(odd) { ...

见 here 举个 jsfiddle 的例子。