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>

我在容器里面有两个div，两个都是浮动

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

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

我尝试没有边框，布局工作正常，没有边框。

任何人都知道如何使用border的div来实现它？

Here is fiddle

Answer 1

你需要设置：

Box-sizing: Border-box;

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

的 Fixed Fiddle

PS：jsfiddle无法识别此属性，但会根据需要进行渲染。

当浏览器缩小时，带边框的儿童div会向下推

1 个答案: