css - div之间的自动间距

Question

我必须创建一个带有大 div（灰色）和附近有许多 div（黑色）的网页（向左浮动）。

目前我正在使用margin-right分隔黑色 div 的边距 ( )。（我不介意灰色的 div，因为它已经完成了。）我的问题是每一行最正确的 div 不能有，margin-right因为我没有更多的空间给它。我无法margin-right: 0为它们创建特定的类 ( )，因为所有黑色 div 都将被动态添加。我的问题有什么解决办法吗？

Answer 1

http://jsfiddle.net/aFkfm/1/

HTML：

<div id="wrapper">
  <div id="big"></div>
  <span></span>
  <span></span>
  ....
</div>

CSS：

div#wrapper {
    margin-left: -20px;
}
div#big {
    float: left;
    width:  220px;
    height: 220px;
    margin-left: 20px;
}
span {
    float: left;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-bottom: 20px;
}​

Answer 2

我会在所有盒子上设置相同的边距（比如margin: 5px），然后简单地margin: -5px在容器上：http: //jsfiddle.net/ZKJeN/

body {
    background: #f3f3f3;
    padding: 15px;
}

/* Container */
ul {
    width: 300px;
    overflow: hidden; /* Clearfix */
    margin: -5px; /* To compensate for the 5px margin around each box */
    list-style: none;
}

    /* Small */
    ul li {
        background: #fff;

        float: left;
        width: 40px;
        height: 40px;
        margin: 5px;

        border: 5px solid #000;
    }

    /* Big */
    ul li:first-child {
        width: 100px;
        height: 100px;
    }

Answer 3

您可以使用nth-child 选择器设置它们的样式。它有一个特殊的形式(an+b)，其中a是循环大小并且b是偏移量。

.blackboxes:nth-child(3n+0) {margin-right:0}
.blackboxes:nth-child(5n+6) {margin-right:0}
.blackboxes:nth-child(3n+6) {margin-right:5px}

你可能需要把 6 变成 7 才能把事情做好。

请注意，最终样式旨在覆盖第一个有效隔离第一组六个黑框的样式。