Question

我有一个div容器，宽度为800px，由一个边框（1px）分成两个。 div A（399px）向左浮动，而div B（400px）向右浮动。问题是当我缩小时，右侧边框（即div B）正在移动，其中它将其放置在页面的底部。为了修复它，我将两个div的宽度设置为百分比，每个50％ - 我删除了边框。现在，当我在中心添加边框时（通过设置div A的右边界），并将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的大小将以的边框进行测量，并在缩小时正确缩小，您可以保留两个宽度为400px的div。

完整的代码应该看起来像这样：

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和＆gt; = 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;
}

缩小时浮动的HTML边框问题

3 个答案: