Question

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

然而，最后的方框是为自己添加了额外的空间，每个单列框都有一个与最后一个框分开的右边距，但正如您从这个快速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属性来帮助控制块宽，因此最好使用填充而不是 margin 来处理排水沟。正如here所解释的那样，box-sizing只将填充包含在元素宽度（而不是边距）中。

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

防止每个＆＃34;行＆＃34;中的第一个和最后一个块从外部有空格，我们使用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%;
}

最后浮动的盒子增加空间？

1 个答案: