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，两个div就不能彼此相邻。但我不能说“52％ - 1px - 1px”之类的东西来消除边界。

Answer 1

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

示例：http://jsfiddle.net/4ZQpv/4/

不要忘记盒子大小的前缀。

Answer 2

只需在每个box-sizing中添加div即可在div

内设置边框

demo

Answer 3

在这种情况下，一个简单的解决方法是对＃col1＆amp;和＃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;
}

由于边界，浮动的div不能说彼此相邻

4 个答案: