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

Question

我试图与CSS一个可伸缩的网格布局和我已经跨过我发疯2个问题来了，所以任何帮助是极大的赞赏

1）我有一个宽度设置为100％（与溢出隐藏），所以它涵盖了完整的浏览器窗口和div我想要放置，说5，一div divs宽度为20％，但最后一个我想要它略宽（21％）。虽然我有隐藏在父容器上的溢出，但最后一个div被包装在其他四个下面，而不是保留在同一行上。我知道这是因为子div的总宽度超过了父div，但是这不会通过使用隐藏来防止？

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%。不过，我认为这个解决方案不会像以前的解决方案那么好。

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/

Answer 2

你可以尝试这样的事情。

CSS

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

HTML

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

Answer 3

给最后一个元素的下列属性将使其占据容器的全部剩余宽度：

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

这是一个简化OOCSS网格框架的版本。一个完整的测试用例和链接可以在下面的演示：

http://codepen.io/barneycarroll/pen/cAykE