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之间的空格不一样.

我希望下面的演示图片有助于解释我到底发生了什么:

请注意:在小提琴中,我添加了4个内部div,但是,我之后的解决方案应该不管我有多少div(例如2,3,4,5,...等)div.

在此先感谢您的帮助.

Answer 1

这是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块的数量