Question

我有很多块，我想以类似桌子的方式订购它们。问题是，由于最后一个的边距权限，它们并不真正符合我的要求。 See this example。我希望在一条线上有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 Fiddle Example

Answer 2

使用last-child，一个CSS选择器，如下所示：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;   
}

Eaxmple：http://jsfiddle.net/QwGV5/4/

最右边的区块没有边距

3 个答案: