见
this article.
基本上,在“传统”CSS框模型中,框元素的宽度仅指定框的内容的宽度,不包括其边框(和填充).
在CSS3中,您可以切换到另一个框模型,如下所示:
box-sizing: border-box;
浏览器的具体实现是:
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
这将导致框尺寸包含元素的边框和填充.所以你现在可以指定
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
width:20%;
border:1px solid red;
float:left
}
并有五个div占用所有的宽度的包含元素,而不包裹.
请注意,旧版浏览器不支持此功能.对于这些,您必须按照此页面上的其他响应将每个框包装到第二个框中.