保证金适用于所有要素的问题

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：relative用于相同目的：

.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/