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

我正在尝试用CSS制作一个可伸缩的网格布局，我遇到了两个让我发疯的问题，所以非常感谢您的帮助

1） 我有一个宽度设置为100%（隐藏溢出）的div，因此它覆盖了整个浏览器窗口，在div内部，我尝试放置，比如说5个div，一个一个，宽度为20%，但最后一个我希望它稍微宽一点（21%）。虽然父容器上隐藏了溢出，但最后一个div被包装在其他四个div的下面，而不是保持在同一行上。我知道发生这种情况是因为子div的聚合宽度大于父div，但是使用overflow hidden是否可以防止这种情况

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

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

---

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

我认为使用

右边距：-1px可能是最佳解决方案

HTML


至于原因
溢出：隐藏不起作用，它不会中断页面的布局。您可以使用以下解决方案来隐藏宽度为101%
的内部div上的溢出。然而，我认为这个方案远不如前一个方案好

HTML

你可以试试这样的东西

CSS

HTML


第一组
第2组
第3组
第4组
第5组
赋予最后一个元素以下属性将使其占据容器的全部剩余宽度：

#grid > *:last-child {
    float:    none;
    overflow: hidden;
    width:    auto;
}

这是OOCSS网格框架的简化版本。以下演示中提供了完整的测试用例和链接：

但您已将边距和填充设置为0且无边框？边距和填充0/边框在哪里？去集装箱？我现在没有设置边距或填充。您是否尝试过css3媒体查询来重新调整大小？也许您可以使用负边距来覆盖一个分区。负边距不起作用，即最后一个分区剩余21%的边距：-1%我得到的结果与将其设置为宽度20%相同，超过1%它再次包裹
#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;}

<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>

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

body, html, div {
    margin:0px;
    padding:0px;
}

.main {
    width:100%;
    height:100px;
    background-color:#000000;
    position:relative;
    overflow:hidden;
}

.col1, .col2, .col3, .col4, .col5 {
    position:absolute;
    top:0px;
    width:20%;
}

.col1 {
    left:0px;
    background-color:#ff0000;
}

.col2 {
    left:20%;
    background-color:#ffcc00;
}

.col3 {
    left:40%;
    background-color:#00ff00;
}

.col4 {
    left:60%;
    background-color:#0000ff;
}

.col5 {
    left:80%;
    width:21%;
    background-color:#cc00ff;
}

<div class="main">
    <div class="col1">div 1</div>
    <div class="col2">div 2</div>
    <div class="col3">div 3</div>
    <div class="col4">div 4</div>
    <div class="col5">div 5</div>
</div>

#grid > *:last-child {
    float:    none;
    overflow: hidden;
    width:    auto;
}