html - 如何将两个div彼此相邻放置但仍处于中心

Question

我真的为此苦苦挣扎，并且已经投入了相当长一段时间。

我有一张带有 Logo 的背景图片，我想在中心放置一个 div，这样它就不会挡住背景中的 BEE 图片。这里的工作示例(这很好，因为它不会阻止图像):http://jsbin.com/ubanuf/9

但是，现在我想在红色 div 的左侧添加另一个 div，其边距大约为 10 像素。但是，当我这样做时，一切都向右移动，背景中的 Logo 被 div 挡住了。此处示例:http://jsbin.com/ubanuf/10

如果我从 main-controller 中删除 margin: 20px auto 0 那么在我查看 1680 X 1050 中的页面之前一切看起来都不错解决。在这个决议中，一切似乎都向左移动。所以现在红色 div 停止的地方和蜜蜂图像开始的地方之间有一个巨大的差距。屏幕截图在这里:http://i53.tinypic.com/25qqk4h.png

为什么我不能将黄色 div 紧挨着红色 div 放置 10 px 的边距

我的要求是:

• 红色 div 为 750 像素
• 黄色 div 约为 200 像素
• 彼此相邻，它们之间有大约 10 像素的边距
• 蜜蜂图片不应该被屏蔽

这有可能吗？

Answer 1

关于:http://jsbin.com/ubanuf/12/

添加了一个带有 margin:auto 的包装 div 以及两个 div 和边距的固定宽度(如果你想增加边距，你还需要增加这个包装的大小)