除非我完全不了解该box-sizing属性...为什么这两个 DIV 不相邻？
box-sizing: border-box;不应该填充、边距和边框“切入”到 50% 的宽度并最终以 100% 的宽度结束并有足够的空间容纳两个 DIV ？
问问题
1697 次
3 回答
5
使用时不添加边距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/
于 2013-08-10T21:20:35.907 回答
2
正如 Jasper 所说，使用box-sizing: border-box. 然而，在这个时代，我们的工具箱里有了一个新工具：calc.
您可以提供这些框width: calc( 50% - 40px );（假设您总共有 40 像素的边距）。
于 2016-04-15T06:44:19.010 回答
1
你误解了它的border-box工作原理。该box-sizing属性最多将元素的填充和边框框限制为其内容的宽度和高度。
基本 UI 模块border-box中所述的值定义：
元素上指定的任何填充或边框都在此指定的宽度和高度内进行布局和绘制。内容的宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。
于 2013-08-10T21:20:31.243 回答