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

我搜索了很多，但我没有幸运地找到解决我所追求的问题的方法

问题是：我创建了一个主div（宽度100%），其中有几个内部div。你可以在这里看到：

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>

内箱1
内箱2
内框3
内箱4

我试图实现的是自动调整内部div之间的空间宽度

第一个子对象向左对齐，最后一个子对象向右对齐，但正如您所看到的，其他div之间的空间不同

我希望下面的演示图片有助于解释我到底想要什么：

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

---

提前感谢您的帮助。

首先，您不能在每个

HTML

页面上多次使用同一

ID

其次，你走在正确的轨道上。只需在每个元素上使用

右边距

，然后继续添加

最后一个子元素的
psuedo类
，并将
边距
设置为
0

为了使其适用于任何数量的div，最好还是建立一个合理的
百分比。（即4人占25%，3人占33%，6人占16.6%，等等）


编辑：

<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>

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

通过在所有子元素上放置
display:inline block
，然后将
text align last:justify
应用于父容器以启用等距内联子元素，可以实现此效果


但是，有一些警告-，Webkit中没有官方支持。它在Chrome 32 beta版中运行良好，并启用了某些标志，但在Chrome 31稳定版或当前的iOS Safari版本中不起作用

其次，IE似乎只尊重
text align last
，而同样类型的
text align
声明（不符合标准）

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

假设你有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块的数量
您可以使用一个简单的网格来存档此效果：

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

似乎不适合我（ChromeV32.0.1700.72M）：奇怪，我运行的是同一个版本，可能是我启用了一些“实验功能”标志。看起来它不会很快出现在Webkit的任何地方。不向后兼容。真的吗？也许这就是为什么我花了一整段时间来解释它在当前活跃的Webkit浏览器中不起作用的原因？另外，我只想提一下，使用
ul
和
li
会更好。。。只是说，`；-）非常感谢
id
提示。我是css新手，我不知道你所说的
psuedo类是什么意思；请用它更新小提琴好吗？它在那里：-）一个
psuedo类是一种可以将对象中的最后一个元素作为目标的方法。所以
box\u frame:last child{
将只针对它找到的最后一个
box\u frame
。谢谢，我会试试。顺便说一句，在小提琴中，
li