html - 防止 DIV 在父级内包装

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

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

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

Answer 1

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

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

fiddle :http://jsfiddle.net/kboucher/Mv7sh/