容器中的流体全宽网格答案

【问题标题】：Fluid full width grid in container容器中的流体全宽网格
【发布时间】：2015-09-23 19:22:19
【问题描述】：

什么是实现以下目标的简单、最好是纯 CSS 的解决方案：有一个 div 网格，其宽度始终与容器的宽度相匹配，由于 div 的边距而在一侧没有一些空间。

所有盒子都应该放在一个容器中。

<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

#container{
width:100%;}
.box{
width: 32%;
height: 0;
padding-bottom: 32%;
float:left;
margin:0 1% 1% 0;
background-color:#CCC;}

我希望每行框都准确地伸展到右侧，没有剩余空间。

谢谢！

【问题讨论】：

“最佳”解决方案？这是在征求与 Stack Overflow 无关的意见。
好的，已编辑。我的意思是：什么是一个简单的、跨浏览器的解决方案，最好只使用 css。
那么你的问题太宽泛了，因此又跑题了。 SO 用于解决特定问题，而不是可以通过谷歌搜索找到的一般和模糊的请求。

标签： css grid margin

【解决方案1】：

有很多方法，但最常见的一种是使用带有first-child 或last-child 的基于行的布局来控制边距，例如

http://codepen.io/anon/pen/MajyaG

<div id="container">
  <div class="row cf">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row cf">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

#container{

}

.box{
  width: 32.5%;
  height: 0;
  padding-bottom: 32%;
  float:left;
  margin:0 1% 1% 0;
  background-color:#CCC;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.row .box:last-child{
  margin-right: 0;
}

【讨论】：

我忘了说：一行中的盒子数量可能会有所不同，例如在较小的设备上只有两个。所以我需要一个将所有盒子放在一个容器中的解决方案。