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

前端之家收集整理的这篇文章主要介绍了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相关文章