css - 包装宽度不适合 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+ */

这个盒子模型在宽度内部而不是外部添加边框和填充。

如需更多信息，请参阅 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 using white-space 删除空格，这样你就可以保持你漂亮的 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