CSS浏览器像素舍入/溢出百分比隐藏 [英] css browser pixel rounding / overflow hidden with percentages

问题描述

我正在尝试使用CSS进行可伸缩的网格布局，并且遇到了2个让我发疯的问题，因此，我们将不胜感激

I am trying to make a scalable grid layout with CSS and I ve came across 2 problems that drive me nuts, so any help is greatly appreciated

1)我有一个div，其宽度设置为100％(隐藏了溢出)，因此它覆盖了整个浏览器窗口，并且在我要放置的div内，例如5，div的宽度为20％，另一个与另一个相邻但我最后一个希望它稍宽一些(21％).虽然我在父容器上隐藏了溢出，但最后一个div被包装在其他四个容器下面，而不是保持在同一行上.我知道发生这种情况是因为子div的总宽度大于父div的宽度，但是使用隐藏的溢出是否可以防止这种情况发生?

1) I have a div with width set to 100% (with overflow hidden) so it covers the full browser window and inside the div I am trying to place ,say 5, divs one next to the other with width 20% but the last one that i want it to be slightly wider (21%). Although i have overflow hidden on the parent container the last div is wrapped below the other four instead of remaining on the same line. I understand that this happens because the aggregate width of the child divs is more than the parent div, but wouldn't this be prevented by using overflow hidden?

2)我遇到的第二个问题与第一个问题有关.我有最后一个div，例如21％，因为如果我将其保留为20％以适合容器，则在窗口调整大小时，页面的右端会出现一个小的间隙.仅由于Webkit浏览器对待像素舍入的方式，这种情况才会发生.

2) The second problem i have is related to the 1st. I have the last div e.g. 21%, because if i leave it to 20% in order to fit the container, on window resize a small gap appears at the right end of the page. This happens on webkit browsers only due to the way they treat pixel rounding.

到目前为止，我正在设法找到一种方法来解决此问题.我要实现的是使多个div彼此相邻，以覆盖整个浏览器的宽度，即使调整大小也要继续这样做.

I am trying to find a way to resolve this with no luck so far. What I want to achieve is to have multiple divs one next to the other that cover the full browser width and continue to do so even on resize.

我找到了一种解决方法，可以在调整大小结束时使用JavaScript调整最后一个div的大小，但是必须有更正确的方法，或者仅使用CSS?

I have found a way around it by using javascript to resize the last div when the resize ends but there must be a more correct way of doing it, or only with CSS?

推荐答案

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

Giving the last element the following properties will make it occupy the full remaining width of the container:

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

这是OOCSS网格框架的简化版本.完整的测试用例和链接可在下面的演示中找到:

This is a simplified version of the OOCSS grids framework. A full test case and links available at the demo below:

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

这篇关于CSS浏览器像素舍入/溢出百分比隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！