包装宽度不适合2列50％

Question

我设置了一个960px宽的页面包装器。我创建了2个块来填充包装宽度，所以我将单独块的宽度设置为50％，但是这两个块在包装中并不适合放在一起。

我想这与单独块的1px实线边界有关。是否具有1px边框的块将是50％宽度+ 1px边界？

如何在不删除1px边框的情况下解决此问题？

Answer 1

如果您不需要支持IE7，您应该使用：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

此框模型在宽度内添加边框和填充，而不是外部。

有关详细信息，请a great article at css-tricks.com。

Answer 2

不要使用百分比。 在div和1px边框上使用476px宽度。您也可以使用margin: -1px;

Answer 3

正确的答案是：

这是因为display：inline-block考虑了html中的空白区域。如果你删除div之间的空白区域，它会按预期工作。实例：http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

但是，如果你想保持你的代码干净/易于阅读（至少在开发模式下），你可以使用空格通过css删除空白，这样你就可以保持漂亮的HTML布局。如果您希望文本包含在列中，请不要忘记再次将空白区域恢复正常。

.container { white-space: nowrap; }
.column { display: inline-block; width: 50%; white-space: normal; }

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

来源：https://stackoverflow.com/a/6872020/2208466和https://stackoverflow.com/a/10592283/2208466