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

我搜索了很多,但我并不幸的是找到一个解决方案,我后来！

这是一个问题：我创建了一个主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,…等等)div.

在此先感谢您的帮助.

解决方法

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

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

解决方法

相关文章