将边距应用于所有元素的问题答案

【问题标题】：Issue with margin applied to all elements将边距应用于所有元素的问题
【发布时间】：2013-03-27 03:20:56
【问题描述】：

我遇到了一个问题，我有一个包装器 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;
}

【问题讨论】：

标签： html css css-float margin

【解决方案1】：

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

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

这是一个使用边框（用于演示目的）而不是边距的示例：http://jsfiddle.net/PdFjt/

【讨论】：

【解决方案2】：

嗯，它实际上并没有删除边距，但您可以对容器应用负边距：

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

或者使用 position: relative 来达到同样的目的：

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

【讨论】：