当具有奇数宽度的div分割为50％/ 50％时，剩余的1px会发生什么？ [英] What happens to the remaining 1px when a div with an odd width is split 50%/50%?

问题描述

假设我想为 div＃wrapper 创建一个背景，以便一半是蓝色，一半是红色，使用两个div与 width：50 ％，例如：

Let's say I wanted to make a background for div#wrapper so that half is blue and half is red using two divs with width:50%, like so:

HTML：

<div id="wrapper">
    <div id="leftSide"></div>
    <div id="rightSide"></div>
</div>

CSS：

body, html, #wrapper {
    width: 100%;
    height: 100%;
}

#wrapper {
    background: white;
}

#leftSide, #rightSide {
    width: 50%;
    height: 100%;
}

#leftSide {
    float: left;
    background: blue;
}

#rightSide {
    float: right;
    background: red;
}

Here is a fiddle for the above example.

这是理论上可以解决的任务。

This would theoretically solve the task. However, if the wrapper had a width containing an odd number of pixels, what would happen to the remaining 1px?

例如，如果包装器的宽度更改为101px，那么，如果包装器的宽度包含奇数像素，那么 #leftSide 将是50px宽，而 #rightSide 将是50px宽，可能留下1px垂直白线运行

For example, if the wrapper's width were changed to 101px, then #leftSide would be 50px wide, and #rightSide would be 50px wide, presumably leaving a 1px vertical white line running down the middle.

浏览器如何正常渲染？一侧会吸收剩余的1px吗？如果是这样，什么是最好的纯CSS方法来解决这个问题？我的第一个倾向是将包装器的背景设置为红色或蓝色，但是有其他方法吗？

How do browsers normally render this? Will one of the sides absorb the remaining 1px? And, if so, what would be the best pure CSS approach to working around this? My first inclination would be to set the background of the wrapper to either red or blue, but are there other approaches?

推荐答案

http://jsfiddle.net/dq323/ 。

在IE和Firefox，右边占用额外的像素。在Chrome中，两者之间实际上有差距。

In IE and Firefox, the right side takes up the extra pixel. In Chrome, there's actually a gap between the two.

设置容器的背景似乎是解决这个问题的最佳方法。

Setting the background of the container seems like the best way to address this.

这篇关于当具有奇数宽度的div分割为50％/ 50％时，剩余的1px会发生什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！