html - 为什么使用 % 属性且总和为 100% 的 block 不能并排放置？

Question

我试图让两个 block 并排放置在另一个 block 中，但我很困惑为什么它们不能很好地并排放置？

.container {height: 200px; width: 400px; background:darkgrey;}
.left {height: 100%; width: 49.8%; margin: 0 0.2%; background:blue; float:left;}
.right {background:red; height:100%; width: 50%; float:left;}

如果我将边距设置为 0.1%，它可以工作，但不会在右侧完美对齐。

为什么那行不通，我是不是漏掉了什么？

http://jsfiddle.net/hyZhU/

使用最新的 Chrome。

Answer 1

margin 和 padding 是宽度的附加值。

例如，如果您有 width: 100px;边距:10px； padding: 15px;，元素的实际宽度为150px

因为你有 width: 49.8%; margin: 0 0.2%;，每个元素的总计为 50.2%+padding。我将宽度降低到 49.6% 并指定了 padding: 0。 fiddle :http://jsfiddle.net/hyZhU/4/