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

【问题标题】：css browser pixel rounding / overflow hidden with percentagescss浏览器像素舍入/溢出隐藏百分比
【发布时间】：2012-04-12 10:34:34
【问题描述】：

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

1) 我有一个宽度设置为 100% 的 div（隐藏了溢出），因此它覆盖了整个浏览器窗口和我要放置的 div 内部，比如 5，一个相邻的 div，宽度为 20%但我希望它稍宽的最后一个（21％）。虽然我在父容器上隐藏了溢出，但最后一个 div 被包裹在其他四个下面，而不是保持在同一行。我知道发生这种情况是因为子 div 的总宽度大于父 div，但是使用溢出隐藏不会防止这种情况发生吗？

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

我正在尝试找到一种方法来解决这个问题，但到目前为止没有运气。我想要实现的是让多个 div 一个挨着另一个覆盖整个浏览器宽度，并且即使在调整大小时也继续这样做。

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

【问题讨论】：

但您已将边距和内边距设置为 0 且无边框？
margin and padding 0/border在哪里？到容器？我没有在任何地方设置边距或填充
您是否尝试过 css3 媒体查询来调整大小？
也许您可以使用负边距来拉动一个 div。
负边距不起作用，即最后一个 div 21% margin-left:-1% 我得到的结果与将其设置为宽度 20% 多于 1% 它再次换行

标签： css fullscreen pixel rounding

【解决方案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 上的溢出。不过，我认为这个解决方案远不如以前的解决方案好。

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/

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：