css - 最后 float 框添加空间？

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 属性来帮助控制 block 宽度，因此最好使用 padding 而不是 ma​​rgin对于排水沟。正如解释的那样 here , box-sizing 仅将填充合并到元素宽度中(而不是边距)。

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

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

这是来自 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%;
}