缩小时 HTML 边框出现浮动问题

Question

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

Answer 1

出现此问题的原因是浏览器按比例缩小了 div 的大小，但没有对边框进行缩小。

要解决此问题，请尝试使用以下 css：

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

div 的大小将使用边框进行测量，并在缩小时适当缩小，您可以将两个 div 的宽度保留为 400px。

完整的代码应该类似于：

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;

}

Answer 2

你可以这样做：
http://jsfiddle.net/SNZEK/

如果将一个 div 放入另一个 div 中并将边框大小添加到父级 div。这应该适用于 FF、Chrome 和 >=IE7

.parent-div { 
    float: left;
    width: 50px;
}
.child-div {  
    width: 48px;
    border: 1px solid black;
}

Answer 3

尝试以下 css 看看是否能解决您的问题。我已经在 IE8 和 Chrome 上尝试过了
他们都工作得很好。我在 jsfiddle 设置了我的测试示例。

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