0

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

.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。

4

5 回答 5

4

margin并且padding是宽度的附加值。

例如，如果你有width: 100px; margin: 10px; padding: 15px;，元素的实际宽度将为 150px

既然你有width: 49.8%; margin: 0 0.2%;，那么50.2%每个元素的总计 +padding 。我将宽度降低到49.6%并指定padding: 0. 小提琴：http: //jsfiddle.net/hyZhU/4/

于 2013-07-09T18:54:00.980 回答
2

.02%边距应用于两侧（左侧和右侧），因此第一个块的总宽度实际上为50.2%. 改为用于.01%边距。

http://jsfiddle.net/ExplosionPIlls/hyZhU/1/

于 2013-07-09T18:55:26.947 回答
1

当您使用设置margin两个值的属性时，您将顶部和底部边距设置为等于第一个值，然后将左右边距设置为第二个值。正因为如此，你的左框占用了相当于 0.2%（左边距）+ 49.8%（实际宽度）+ 0.2%（右边距）的空间，加起来是 50.2%。这会导致第二个框被推到新的一行。

于 2013-07-09T19:00:29.873 回答
0

这应该工作，，

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

更新

.container {height: 200px; width: 400px; background:darkgrey;}
    .left {height: 100%; width: 199px; margin: 0 1px; background:blue; float:left;}
    .right {background:red; height:100%; width: 199px; float:right;}
于 2013-07-09T18:56:21.370 回答
0

浏览器必须将百分比转换为像素，不同的浏览器将这些百分比相加不同。因此，当前宽度的 49.8% 可能会被一个浏览器向上舍入为 201px，而另一个浏览器可能向下舍入为 199px。

这意味着在调整为像素后，浏览器可能会尝试将大于 100% 的内容放入空间，这会导致换行。

避免这种情况的最佳方法是使用更长的百分比值来最小化舍入，和/或将边框框（http://www.paulirish.com/2012/box-sizing-border-box-ftw/）组合到您的解决方案也是如此。

例如：33.3333333% 优于 33.3%。

于 2013-07-09T18:59:04.307 回答