包装宽度不适合2列50%

时间:2012-12-26 19:46:48

标签: css width

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

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

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

3 个答案:

答案 0 :(得分:7)

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

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

box models

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

答案 1 :(得分:2)

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

答案 2 :(得分:1)

正确的答案是:

这是因为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/2208466https://stackoverflow.com/a/10592283/2208466