css - 将两个 50% 的 div 与边距对齐且不溢出

Question

如何让两个 50% 宽度并排的 div 和一个边距没有第二个 div 落在第一个下面？div id 样式如下：

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

谢谢，丹

score 3 · Accepted Answer

50% + 50% + 利润> 100%

因此，元素环绕。您需要调整宽度或边距以保持在 100% 的限制内。

score 2 · Accepted Answer

2

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

怎么样？

于 2013-05-08T22:14:31.337 回答

score 1 · Accepted Answer

您需要将 div 的宽度更改为小于 50%，因为它们总共有 50% + 50% + 4x 边距 2px。尝试将其更改为以像素或 fe 49% 为单位的精确值。

score 1 · Accepted Answer

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

这将集中 div 并且仍然会根据浏览器的大小为您提供少量边距。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

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

6 回答 6