html - 将边距应用于所有元素的问题

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/