html - 如何强制带边框的元素的宽度？

Question

我正在使用 Twitter Bootstrap对于我的页面布局，我想插入一个 CSS3 Box Shadow在专栏中。

我遇到的唯一问题是框阴影有一个 1px 的边框，这足以让我的第二列换行到下一行。如果我移除边框，它会很好地对齐。

如果我从列宽中减去 2px，它看起来正是我想要的。但是，我想利用 Bootstrap 的流畅布局(基于百分比而不是像素)，所以没有简单的方法来简单地制作 <div>。比其他情况下窄 2 个像素。

我真的不喜欢边框不在元素宽度内的方式。有谁知道有办法得到我的 <div>即使有边框也要尊重当前宽度？

Answer 1

使用

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box; 

边框的宽度将添加到框内。

这是一个示例，其中包含两个尺寸为 100x100 且边框为 20 像素的 div。第一个有'box-sizing'，第二个没有:http://jsfiddle.net/y3zxC/ .