div之间的自动空间

Question

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

目前我正在使用分隔黑色div的边距（margin-right）。 （我不介意灰色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 selector设置样式。它有一个特殊格式(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以使事情正确。

请注意，最终的样式是为了覆盖第一个样式，有效地隔离了第一组六个黑盒子。