最后一个浮动框添加空间？

Question

我有一个 2 行的 3 列网格，其中第一行的第二个框是双列，本质上是一个特色部分。

然而，最后一个盒子给自己增加了额外的空间，每个单列盒子都有一个与最后一个盒子分开的右边距，但正如你从这个快速fiddle中看到的那样，右下角有额外的空间。 .

 .blocks > div{
  display: block;
  float: left;
  overflow: hidden;
  position: relative;
  color: white;
}

.block{
width: 31.33%; 
height: 25%;   

 }

.block.one{
margin-bottom: 9px;
    margin-right: 9px;

    background-color: green;
}
.block.two.feature{
    width: 66.2%;
margin-bottom: 9px;
    background-color: red;
}
.block.three{
background-color: blue;
margin-right: 9px;
}
.block.four{
background-color: purple;

 margin-right: 9px;
}
.block.five{
    margin-right:0; 
background-color: pink;
}

如果我删除边距，只需将框除以 3，它们就会齐平地坐在那里，一旦我添加边距，它似乎会影响最终的框。

我不知道为什么也没有任何意义

Answer 1

由于您使用box-sizing 属性来帮助控制块的宽度，因此最好使用padding 而不是ma​​rgin 作为装订线。正如here 解释的那样，box-sizing 仅将填充合并到元素宽度（而不是边距）中。

然后，由于您需要块具有背景颜色，因此处理此问题的最佳方法是将每个块包装在容器中并对容器应用填充。我意识到拥有这些额外的 div 并不理想，但这确实是正确的方式，在真正的布局中，无论如何你几乎总是会有一些东西在里面。这也有助于将布局样式与模块样式分开，正如 here 所教导的那样。

为了防止每个“行”中的第一个和最后一个块在外部有空间，我们使用 alpha 和 omega 类覆盖左/右填充。这种技术很常见。查看 Bootstrap 和 Foundation 等流行 CSS 网格框架的源代码。

这是fiddle 中最相关的代码。如果有任何不清楚的地方，很乐意提供帮助。

http://jsfiddle.net/DMKdx/10/

.blocks{
    background-color: grey;
    width:80%;
    height:670px;
}

.block{
    width: 33.33333333333%;
    height: 25%;
    float: left;
    color: white;
    padding: 0 4.5px;
    margin-bottom: 9px;
}

.block.alpha {
    padding-left: 0;
}

.block.omega {
    padding-right: 0;
}

.block.feature {
    width: 66.6666666666667%;
}