html - 最右边的块没有边距

Question

我有很多块，我想以类似表格的方式对它们进行排序。问题是，由于最后一个的margin-right，它们并不真正符合我想要的方式。请参阅此示例。我想在一条线上有 4 个块，我该如何实现？

CSS：

.box {
    width: 500px;
    height: 10000px;
}

.block {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 30px;
    background-color: #0f0;
    margin-bottom: 50px;
}

Answer 1

您可以为每行中的最后一个块创建一个新类（例如.last）并margin-right:0为该类创建一个。

HTML：

<div class="box">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block last"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block last"></div>
</div>

CSS：

.last { margin-right: 0; }

JS 小提琴示例

Answer 2

使用last-childCSS 选择器，如下所示：http: //jsfiddle.net/QwGV5/1/

.block:last-child {margin-right: 0;}

为了兼容性：http ://caniuse.com/css-sel3

Answer 3

div:last-child {
    margin-right: 0;
}

但这仅适用于IE9+（可能是8，不记得了）

否则，在最后一门课上放一门课。

这是您的小提琴http://jsfiddle.net/QwGV5/2/的更新

我认为对于您想要做的事情，您实际上希望在每 4 个 div 上执行一次。所以你可以使用nth-child

.box div:nth-child(4n) {
  margin-right: 0;   
}

示例：http : //jsfiddle.net/QwGV5/4/