使用带有浮点数的border-right显示不正确

Question

我在容器div＆amp; amp中放置了几个div。第一个div右边有一个边框。它没有边框正常工作，但是当我添加边框时，它们都会混乱。右侧容器内的文本显示在另一个div的边界下。

向您展示我的意思是图片：

这是我的代码：

<div style="margin: 0px auto; width: 500px; border: 1px solid #000;">
    <div style="width: 500px; border-bottom: 1px solid #000;">
        <div style="float: left; width: 250px;">Resolution/Megapixels</div>
        <div style="float: right; width: 250px;">Average Quality Size/Best Quality Size</div>
        <div style="clear: both;"></div>
    </div>
    <div style="width: 500px; border-bottom: 1px solid #000;">
        <div style="float: left; width: 250px; border-right: 1px solid #000;">0.5 megapixels</div>
        <div style="float: right; width: 250px;">3x5 inches/NA</div>
        <div style="clear: both;"></div>
    </div>
</div>

编辑：

请不要理会。我发布这个帖子后就把它搞定了。

Answer 1

你的边框正在使盒子太宽。需要将左侧div（带边框）设置为249，以便与边框相加最多250px。

Answer 2

这是因为向元素添加边框会将边框宽度添加到元素宽度，因此边框使“3x5英寸”实际上是251px宽，因为它无法放在250px宽度元素旁边在500px容器中，只需将250px div中的一个减少1px至249px

Answer 3

NVM ......我是个傻瓜。在我发布之后意识到我不得不将第一个div的大小减少1，因为边框大小。