包装宽度不适合 50% 的 2 列答案

【问题标题】：Wrapper width doesn't fit 2 columns of 50%包装宽度不适合 50% 的 2 列
【发布时间】：2012-12-12 07:10:08
【问题描述】：

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

我猜这与单独块的 1px 实心边框有关。是不是一个1px边框的块周围都是50%宽+1px边框？

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

【问题讨论】：

标签： css width

【解决方案1】：

正确答案是这样的：

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

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

但是，如果您想保持代码干净/易于阅读（至少在开发模式下），您可以使用 white-space 通过 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

【讨论】：

【解决方案2】：

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

【讨论】：

+1。这对我来说更有意义，并且可以在任何浏览器中使用。如果父容器是像素，那么百分比宽度不会带来任何好处，除非您的容器大小定期更改。
没关系。但对于响应式解决方案，您通常需要使用百分比。
你也可以使用margin: -1px
这实际上是唯一对我有用的解决方案.. 上面的解决方案在 2 个 div 中相邻的 50% 宽度不起作用。

【解决方案3】：

如果您不需要支持 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。

【讨论】：

这是最好的选择。我一直用这个