在设计流体布局时,如何使用边框而不会破坏布局.
更具体地说,我有一个由五个div组成的HTML小部件.我想要五个div占用包含元素中的所有房间.我也想围绕每个1px边框.
我试过了：
.Box {float：left;身高：100％;宽度：100％;边框：1px纯红色; }
这不起作用：宽度会增加10px,导致盒子被包装.减少宽度百分比不起作用,因为它不会占用正确的空间量,而对于某些页面大小,仍然会包装.
管理这些元素之间的相互作用的正确方法是什么？
解决方法
见
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占用所有的宽度的包含元素,而不包裹.
