缩小时浮动的HTML边框问题 [英] HTML border problems with float when zoom out

问题描述

我有一个宽度为800px的div容器，它被一个单独的边框（1px）分隔为两部分。 div A（399px）向左浮动，div B（400px）向右浮动。问题是当我缩小时，正确的边框，即div B正在移动，它将它放在页面的底部。为了解决这个问题，我将两个div的宽度设置为50％的百分比 - 我删除了边框。现在，当我在中心添加边框（通过设置div A的border-right），并将div A调整为49.8％时，它在缩小时再次将div B放置在底部。难道我做错了什么？问题是，我猜想边框被设置为1px。如何解决这个问题？我需要边框的1px大小。

I have a div container, which is 800px width, that is separated into two by a single border(1px). div A (399px) is floated left while div B(400px) is float right. The problem is when i'm zooming out, the right border, which is div B, is being move wherein it place it at the bottom of the page. To fix it, I set the two div's width to percentage at 50% each -- I removed the border. Now when I add the border at the center (by setting border-right of div A), and also adjusting div A to 49.8%, it again places div B at the bottom when zooming out. Am I doing something wrong? The problem is that the border is set to 1px I guess. How to fix this? I need the 1px size of the border.

推荐答案

发生此问题是因为浏览器按比例缩小了div的大小，但不适用减少到边界。

This problem occurs because the browser is reducing the size of the divs proportionally, but does not apply reducing to the border.

解决这个问题的方法是使用这个CSS：

To resolve this try using this css:

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;

div的大小将以边界衡量并正确减少缩小时，您可以将两个div的宽度设置为400px。

The size of the div will be measured with the border and reduced properly when zooming out and you can leave both divs with the width of 400px.

完整的代码看起来应该与此类似：

The full code should look simillar to this:

div#container{
    width: 800px;
}
div#container > div{
    width: 400px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

div#left{
    float: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
}
div#right{
    float: right;

}

这篇关于缩小时浮动的HTML边框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！