当浏览器缩小时,带边框的儿童div按下

Question

#container{width:100px; height:200px; border:solid 1px #000;}

#container div{float:left;}

#a, #b{width:50px; height:50px;}
#a{background:red;}
#b{background:yellow;}

#c, #d{width:48px; height:48px; border:solid 1px #000;}
#c{background:blue;}
#d{background:green;}

//没有边框

<div id="container">
    <div id="a"></div>
    <div id="b"></div>
</div>

//带边框

<div id="container">
    <div id="c"></div>
    <div id="d"></div>
</div>

我在容器内有2个div,两个都向左浮动

但是,如果我将边框添加到小div中,

当浏览器缩小时,div将推到底部并破坏布局

我尝试没有边框和布局工作正常没有边框.

有谁知道如何用border的div实现它？

这是小提琴

Answer 1

你需要设置:

Box-sizing: Border-box;

它告诉边界在内部而不是外部生长,这样它不会改变布局.
也将盒子的宽度改回50px.

Fixed Fiddle

PS:jsfiddle不识别此属性,但会根据需要呈现它.