CSS3盒子大小50％宽度

Question

除非我完全不理解box-sizing属性......为什么这两个DIV不是彼此相邻？

http://jsfiddle.net/MK7Fs/

使用box-sizing: border-box;不应将填充，边距和边框“切入”50％的宽度，最终以100％的宽度结束并有足够的空间容纳两个DIV？

Answer 1

使用box-sizing : border-box时未添加保证金。如果你删除了左/右边距，你的方框就会排在同一条线上。

我还注意到你的<div>元素在第一个关闭标记和第二个开始标记之间有空格。使用display : inline-block时，这将在元素之间添加空格，并且它们不会在同一行上排列。

演示：http://jsfiddle.net/MK7Fs/1/

box-sizing文档：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

有关display : inline-block元素之间空格的一些阅读：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

正如Jasper所说，使用box-sizing: border-box时不会添加保证金。但是，在这个时代，我们的工具箱中有了一个新工具：calc。

您可以设置width: calc( 50% - 40px );框（假设您的总保证金总额为40px）。

演示：https://jsfiddle.net/htwj/yzh7zg25/

Answer 3

你误解了border-box的工作原理。 box-sizing属性最多会将元素的填充和 border 框限制为其内容宽度＆amp;高度。

Basic UI Module中所述的border-box值的定义：

  

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