2

我经常遇到这个问题，这通常会导致我花费更多时间来尝试解决问题。本质上，它是一个简单的布局，如下所示：

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 x 4) = 920 + (20 x 4) = 80 = 1000（但容器宽度为 980）。因此，我得到的不是每行 4 个项目，而是三个。

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

理想情况下，我想要一个在所有主要浏览器和 IE7 中都能正常工作的纯 CSS 解决方案。有人知道吗？

4

2 回答 2

1

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

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

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

于 2012-10-17T21:07:49.127 回答
0

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

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

但是，根据您的设计，225而不是230的宽度和高度将在980处与边距保持一致。

除非您有特定的理由只拥有 margin-right，否则您可以将其拆分为10margin-right的margin-left值。

于 2012-10-17T21:11:15.210 回答