CSS

Question

我经常遇到这个问题，这通常会让我花费额外的时间来尝试解决问题。基本上它是一个简单的布局如下：

HTML：

<div id="container">
  <div id="items">
    <div class="item">
      (data here)
    </div>
    <div class="item">
      (data here)
    </div>
    <div class="item">
      (data here)
    </div>
    <div class="item">
      (data here)
    </div>
    -- repeats --
  </div>
</div> <-- end container -->

CSS

#container {
  margin: 0 auto;
  width: 980px;
  overflow: hidden;
}
#items {
  float: left;
  width: 980px;
  min-height: 1000px;
}
#items .item {
  float: left;
  width: 230px;
  height: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
}

我的预期结果是有一个4 x 4网格显示项目。正如您从上面的CSS中看到的那样，我为每个项目添加了一个右边距，以便将它们分开。唯一的问题是每行中的第四项下降到下一行（这显然是由于项目上的右边距引起的）：

（230×4）= 920 +（20×4）= 80 = 1000（但容器宽度为980）。因此，每行不是4项，而是获得3项。

如果未包括每四个项目的右边距，则所有四个项目完全符合父DIV的约束。我知道我可以为第四项添加一个单独的类，并将它的右边距设置为0px，但这意味着我必须在动态显示产品时在脚本中添加额外的检查。

理想情况下，我想要的是纯CSS解决方案，适用于所有主流浏览器和IE7。有人知道吗？

Answer 1

您可以尝试为items使用百分比而不是固定宽度。

#items .item {
    float: left;
    width: 23%;
    height: 230px;
    margin-right: 2%;
    margin-bottom: 20px;
}

小提琴：http://jsfiddle.net/kboucher/Mv7sh/

Answer 2

要定位元素的每个第四个子元素，您可以使用:nth-child(x)，但IE8及更早版本不支持。 w3schools doc

:last-child不会真的这样做，因为你必须包装每组四个。

但是，根据您的设计，宽度和高度 225 而不是 230 甚至可以在 980 处使用边距。< / p>

除非您有特定理由只有保证金权限，否则您可以将其分为margin-right和margin-left，其值为 10 。

防止DIV在父级内包装

CSS

2 个答案: