将两个50％的div与边距对齐并且没有溢出

Question

如何将两个50％宽度并排的div和没有第二个div的边距放在第一个？ Div id样式如下：

#div3{width:50%; float:left; margin: 2px; background-color:yellow;}

谢谢， 丹

Answer 1

50％+ 50％+利润＆gt; 100％

因此，元素包装。您需要调整宽度或边距以保持在100％限制范围内。

Answer 2

#div3{width:48%; float:left; margin: 1%; background-color:yellow;}

怎么样？

Answer 3

您需要将div的宽度更改为小于50％，因为它们共同具有50％+ 50％+ 4x边距2px。尝试将其更改为精确的像素值或f.e. 49％。

Answer 4

边距将为div元素提供额外的宽度。 您可以尝试将div设置为49％，并为每个div提供自动保证金。

这将集中div并仍然根据浏览器大小提供少量保证金。

Answer 5

我总是作弊并将它们设置为49％宽度，然后添加填充（不是边距）。但是你想要一些视觉拼色，对吧？如果你想要一个背景而一个没有背景（相对于页面的其余部分），将黄色设置为50％，将无色背景设置为49％。

Answer 6

您可以考虑使用新的box-sizing属性，该属性从宽度中减去填充，而不是像您遇到的那样将其添加到顶部：

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

大多数浏览器尚不支持整个规范，但它可以实现您的目标：http://caniuse.com/#search=box-sizing。

虽然我相信您必须使用填充而不是边距来创建间距。