html - 浏览器缩小时带边框的子 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 实现它吗？

Here is fiddle

Answer 1

你需要设置:

Box-sizing: Border-box;

它告诉边框向内生长而不是向外生长，这样它就不会改变布局。
同时将框的宽度改回 50px。

Fixed Fiddle

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