CSS中水平div之间的自动间距

Question

我已经搜索了很多，但我没有幸运地找到我所追求的解决方案！

这是问题所在：我创建了一个主 div（宽度 100%），其中有几个内部 div。你可以在这里看到它：http://jsfiddle.net/EAkLb/1/

HTML：

<div class="section_zone">
    <div class="box_frame" id="_15">inner box 1</div>
    <div class="box_frame" id="_15">inner box 2</div>
    <div class="box_frame" id="_15">inner box 3</div>
    <div class="box_frame" id="_15">inner box 4</div>
</div>

我想要完成的是自动调整内部 div 之间的空间宽度。

first-child向左对齐，last-child向右对齐，但是可以看到，其他div之间的间距是不一样的。

我希望下面的演示图片能帮助我准确地解释我所追求的：

请注意：在fiddle 中，我添加了 4 个内部 div，但是，无论我有多少个 div（例如 2、3、4、5 等），我所追求的解决方案都应该有效) div。

提前感谢您的帮助。

Answer 1

Here is JSFiddle

假设你有 100% 并且你有 4 件。 4 件意味着你有 3 个 margin-left 块，所以当你让你的 div 22*4=88 然后 100-88=12 然后 12/3=4 那么你的 margin-left 必须是：4

div.box_frame{
    float: left;
    background-color: #eee; /* standard background color */
    border: 1px solid #898989; 
    border-radius: 11px;
    padding: 2px;
    margin-left:4%;
    text-align: center;
    /* change border to be inside the box */
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
div.box_frame:first-child{
    margin-left: 0;
}
div.box_frame#_15{ /* width 15% */
    width: 22%;
}

因此，如果您使用较少的变量，那么您可以使用此解决方案而无需依赖 div 块的数量

Answer 2

首先，您不能在每个HTML 页面上多次使用同一个ID。

其次，你在正确的轨道上。只需在每个元素上使用margin-right，然后继续添加last-child的psuedo-class并将margin设置为0。

http://jsfiddle.net/EAkLb/1/

为了让any amount of divs 以这种方式工作，最好还是建立一个有意义的percentage。 （即 4 为 25%，3 为 33%，6 为 16.6%，等等）

---

编辑：

这将是一个更好的方法（尝试调整窗口大小）：

http://jsfiddle.net/EAkLb/5/

Answer 3

您可以通过将display:inline-block 放在所有子元素上来实现此效果，然后将text-align-last:justify 应用于父容器以启用均匀间隔的内联子元素。

See working Fiddle here.

但是有一些警告 - while Firefox has supported this since v12, and IE even since 5.5，Webkit 中官方不支持。它在在启用了某些标志的 Chrome 32-beta 中可以正常工作，而在 Chrome 31-stable 或当前的 iOS Safari 版本中则无法正常工作。

其次，IE 似乎只尊重text-align-last，当还有一个相同类型的text-align 声明时（不符合标准）。

我不知道有什么方法可以在旧的 Webkit 浏览器中以另一种方式干净地实现此效果，但您可以通过例如基于边距的回退来解决此问题，或者在运行时进行基于 JS 的计算。