调整两个50％的div与边距和没有溢出

我怎么有两个50％并排宽度的div和边缘没有第二个div下面的第一个？股利ID样式如下：调整两个50％的div与边距和没有溢出

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

谢谢，丹

你不能。 50％+ 50％= 100％，而且更多的是大于100％ – keithwyland 2013-05-08 22:14:43

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

怎么样？

2013-05-08 22:14:31 Owen

感谢大家的帮助，我试图按照Owen的例子改变保证金比例。很棒。谢谢。可惜没有办法让内缘保持100％的方面，但很容易将列分隔成网格。 – 2013-05-09 06:28:39

对此有不同的看法。在CSS中查看'box-sizing：border-box'。然后你可以在div中使用填充，而不是在页边之外。但请注意浏览器支持。 – keithwyland 2013-05-09 13:50:38

50％+ 50％+余量> 100％

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

2013-05-08 22:14:09

我总是欺骗并将它们都设置为49％的宽度，然后添加填充（不是保证金）。但是你想要一些可视化的颜色限制，对吧？如果你想要一个背景，一个没有背景（相对于页面的其他部分），将黄色背景设置为50％，将无色背景设置为49％。

2013-05-08 22:14:34

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

2013-05-08 22:14:52 filipko

该边距将给div元素带来额外的宽度。您可以尝试将div设置为每个49％，并为每个div设置一个自动边距。

这将集中divs，仍然给你一个依赖于浏览器大小的少量保证金。

2013-05-08 22:15:48 dan360

你可以考虑使用新box-sizing财产减去宽度填充，而不是将它添加在上面像遇到：

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

大多数的浏览器不支持整个规范还没有，但它可以完成你想要的：http://caniuse.com/#search=box-sizing。

虽然我相信你将不得不使用填充而不是边距来创建间距。

2013-05-08 22:37:57

回答