html - 由于边框， float 的 div 不能彼此相邻

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

你应该添加 box-sizing: border-box; 到每个列

一个例子:http://jsfiddle.net/4ZQpv/4/

不要忘记 box-sizing 的前缀。