Question

什么是简单的，最好是仅限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;}

我希望每排盒子都能完全伸展到右侧，而不会留下空间。

谢谢！

Answer 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;
}

容器中的流体全宽网格

1 个答案: