css 浏览器像素舍入/溢出隐藏百分比

Question

我正在尝试使用 CSS 制作可扩展的网格布局，但我遇到了 2 个让我抓狂的问题，因此非常感谢您的帮助

1) 我有一个宽度设置为 100% 的 div( overflow hidden )所以它覆盖了整个浏览器窗口和我试图放置的 div 内部，比如 5，一个宽度为 20% 的 div 一个挨着另一个但最后一个我希望它稍微宽一点 (21%)。虽然我在父容器上隐藏了溢出，但最后一个 div 包裹在其他四个下面，而不是留在同一行上。我知道发生这种情况是因为子 div 的总宽度大于父 div，但是使用 overflow hidden 不会阻止这种情况吗？

2) 我遇到的第二个问题与第一个问题有关。我有最后一个 div 例如21%，因为如果我将其保留为 20% 以适合容器，则在窗口调整大小时，页面右端会出现一个小间隙。这种情况发生在 webkit 浏览器上只是因为它们处理像素舍入的方式。

到目前为止，我正在尝试找到解决此问题的方法，但运气不佳。我想要实现的是让多个 div 一个接一个地覆盖整个浏览器宽度，并在调整大小时继续这样做。

我找到了一种解决方法，在调整大小结束时使用 javascript 调整最后一个 div 的大小，但必须有更正确的方法，或者只能使用 CSS？

Answer 1

我认为使用 margin-right:-1px; 可能是解决基本上使图像的布局宽度为 20% 但其可见宽度仍为 21% 的问题的最佳解决方案。

HTML

<div id="grid">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
</div>

CSS

#grid {width:100%;height:100px;}
#grid > div {width:20%;height:100px;float:left;}
#grid > div:last-child {width:21%;margin-right:-1%;}
.a {background-color:#F00;}
.b {background-color:#F33;}
.c {background-color:#F66;}
.d {background-color:#F99;}
.e {background-color:#FBB;}

http://jsfiddle.net/ER7ML/1/

至于 overflow:hidden; 不起作用的原因，它不会中断页面​​的布局方式。您可以使用以下解决方案，该解决方案说明要在具有 width:101% 的内部 div 上 overflow hidden 。不过，我认为这个解决方案不如以前的解决方案好。

HTML

<div id="outer">
  <div id="grid">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
  </div>
</div>

CSS

#outer {width:100%;height:100px;}
#grid {width:101%;}
#grid > div {width:20%;height:100px;float:left;}
#grid > div:last-child {width:21%;}
.a {background-color:#F00;}
.b {background-color:#F33;}
.c {background-color:#F66;}
.d {background-color:#F99;}
.e {background-color:#FBB;}

http://jsfiddle.net/yUPh7/1/