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之间的空间宽度。

第一个孩子与左边对齐，最后一个孩子与右边对齐，但正如你所看到的，其他div之间的空间不一样。

我希望下面的演示图片能够帮助我解释我的目标：

请注意：在fiddle中，我添加了4个内部div，但是，我所使用的解决方案应该无论我有多少div（例如2,3,4,5，... .etc）divs。

提前感谢您的帮助。

Answer 1

Here is JSFiddle

假设您有100％而且您有4件。 4件意味着你有3个边距左边的块，所以，当你使你的div 22 * 4 = 88然后100-88 = 12然后12/3 = 4然后你的边距必须是：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

首先，您不能每ID页多次使用相同的HTML。

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

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的计算。

Answer 4

您的云使用简单的网格来存档此效果：

.section_zone {
  display: grid;
  grid-auto-flow: column;
}