由于边界,浮动的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;到每个col

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

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