浮动的divs不能因为边界而彼此相邻

Question

<div id="container">
    <div id="col1">menu1</div>
    <div id="col2">menu2</div>
    <div style="clear: both;"></div>
<div>
#container
{
    width: 400px;
    background-color: green;
}
#col1
{
    float: left;
    background-color: red;
    width: 48%;
    border: 1px dotted blue;
}
#col2
{
    float: left;
    background-color: yellow;
    width: 52%;
    border: 1px dotted blue;
}

http://jsfiddle.net/4zqpv/1/

这可能很简单，但我无法弄清楚。当我没有border时，它可以正常工作。但是，一旦我添加border，两个Divs就无法彼此相邻。但是我不能说" 52％-1px -1px"以消除边框。

Answer 1

您应该将box-sizing: border-box;添加到每个col

一个示例：http：//jsfiddle.net/4zqpv/4/

不要忘记盒子尺寸的前缀。

Answer 2

只需在每个div中添加box-sizing，它将在div

内设置边框

demo

Answer 3

在这种情况下，一个简单的解决方案是将-1px的余量应用于＃col1＆amp;＃col2。

#col1, #col2 {
     margin: -1px;   
}

http://jsfiddle.net/4zqpv/3/

Answer 4

由于您的容器具有绝对宽度，只需使用一些数学：

http://jsfiddle.net/4zqpv/6/

#container
{
    width: 400px;
    background-color: green;
}
#col1
{
    float: left;
    background-color: red;
    width: 190px;
    border: 1px dotted blue;
}
#col2
{
    float: left;
    background-color: yellow;
    width: 206px;
    border: 1px dotted blue;
}