CSS：未应用border-box

Question

我对如何让border-box在CSS中工作感到困惑。

基本上我想要两个彼此相邻的div：一个具有固定宽度的左手#sidebar，以及通过文本占用的页面的其余部分（#results元素）。

我是通过将两个div左移，#sidebar上固定宽度为220px，并在{{width: 100%，left-margin: 220px和box-sizing: border-box上设置来完成此操作1}}元素。

但是，#results元素太宽了220px - 看起来好像没有应用#results。

这个JSFiddle演示了我的问题：http://jsfiddle.net/m8KFe/3/

Answer 1

border-box值仅限制填充和＆amp;边界区域 - 不考虑边距。

取自Basic UI Module：

  

border-box

     

也就是说，在元素上指定的任何填充或边框都会布局并在此指定的宽度和高度内绘制。通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算内容宽度和高度。