我设置了一个 960px 宽度的页面包装器。我创建了 2 个块来填充包装器宽度,因此我将单独块的宽度设置为 50%,但是这两个块不适合并排放置在包装器中。
我想这与单独块的 1px 实心边框有关。是 1px 边框的块将是 50% 宽度 + 1px 边框吗?
如何在不删除 1px 边框的情况下解决此问题?
如果您不需要支持 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 上的精彩文章。
那就不要使用百分比。在 div 和 1px 边框上使用 476px 宽度。你也可以使用margin: -1px;
正确答案是这样的:
这是因为 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