保证金适用于所有元素

Question

我有一个问题，我有一个包装div，其中div包含另一个div浮动到左侧，并有一个margin-left: 30px;这就是它现在的样子

不过，我想有这么有第一和第二列后仅利润率（所以第一列是在正常位置）

应该像这样（忽略保证金大小的差异，这是只是一个快速的形象）

我该如何做到这一点？

HTML

<div clas="wrapper"> 
    <div class="container"> 
     <div class="box">box 1</div> 
     <div class="box">box 2</div> 
     <div class="box">box 3</div> 
     <div class="box">box 4</div> 
     <!-- etc... --> 
    </div> 
</div> 

CSS

.wrapper { 
    width: 1280px; 
    margin: 0 auto; 
} 

.container { 
    overflow: hidden; 
} 

.box { 
    float: left; 
    margin-left: 30px; 
} 

Answer 1

那么，它实际上没有去除余量，但你可以申请负缘至容器：

.container { 
    overflow: hidden; 
    margin-left: -30px; 
} 

要么 使用position：相对为了同样的目的：

.container { 
    overflow: hidden; 
    position: relative; 
    left: -30px; 
} 

Answer 2

根据您的浏览器支持的要求，你可以使用CSS3 :nth-of-type伪选择：

.box:nth-of-type(3n + 1) { 
    margin-left: 0; 
} 

下面是一个使用边界的例子（用于演示目的）而不是保证金：http://jsfiddle.net/PdFjt/