流畅的CSS布局和边框

在设计流体布局时,如何在不破坏布局的情况下使用边框.

更具体地说,我有一个HTML小部件,它由五个div组成.我希望五个div占据包含元素中的所有空间.我还希望每个都有一个1px的边框.

我试过:.box {float:left; 身高:100%; 宽度:100%; 边框:1px纯红色; 这不起作用:宽度将增加10px,导致包装盒.减小宽度百分比不起作用,因为它不会占用正确的空间量,对于某些页面大小,仍然会换行.

什么是管理这些元素之间相互作用的正确方法？

看到这篇文章.

基本上,在"传统"的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占用包含元素的所有宽度而不包装.

请注意,旧版浏览器不支持此功能.对于这些,您必须按照此页面上的其他响应将每个框包装到第二个框中.