如何使两个div并排显示但仍然居中？

Question

我一直在苦苦挣扎，已经很长时间了。

我有一个带有标志的背景图像，我想要一个位于中心的div，这样它就不会阻挡背景中的BEE图像。这里有一个工作示例（这个没问题，因为它不会阻挡图像）：http://jsbin.com/ubanuf/9

但是，现在我想在红色div的左边添加另一个div，它们之间有大约10像素的间距。然而，当我这样做时，所有东西都向右移动，我的背景中的标志被div遮挡了。示例在这里：http://jsbin.com/ubanuf/10

如果我从main-controller中删除margin: 20px auto 0，那么事情看起来还不错，直到我在1680 X 1050分辨率下查看页面。在这个分辨率下，所有东西似乎都向左移动。所以现在红色div停止的地方和bee图像开始的地方之间有一个巨大的间隙。屏幕截图在这里：http://i53.tinypic.com/25qqk4h.png

为什么我不能将黄色div放在红色div旁边，并在它们之间留下10像素的间距？

我的要求是：

• 红色div宽度为750 px
• 黄色div宽度约为200 px
• 两个div相邻，它们之间有大约10像素的间距
• bee图像不应被阻挡

这可行吗？

- Anthony

Answer 1

怎么样：http://jsbin.com/ubanuf/12/

添加了一个包裹 div，带有 margin:auto 和固定宽度的两个 div 和 margin（如果您想增加 margin 的大小，您也需要增加此包装器的大小）

- Ben

---

这会阻止图像以 1280 x 1024 分辨率显示 :( - Anthony

这是因为红色和黄色的div具有固定的大小，因此在较低的分辨率下会重叠在标志上。您设置的要求冲突了。要么您在中间有一个流动的盒子，永远不会重叠蜜蜂（但可能会变得非常小），要么您有一个固定的盒子，它将重叠蜜蜂。 - Ben

是的，我稍微有点想法认为这些要求冲突，但希望有更多 CSS 经验的人来确认一下。 我将重新制作图像，以便可以将蜜蜂图像向下移动并将我的登录等放在页眉中。 这样可以消除左侧黄色 div 的需求。 - Anthony

你可以尝试应用http://www.alistapart.com/articles/slidingdoors/中的滑动门技术，使其始终显示。 - Ben

overflow:hidden是什么作用？ - FosAvance

答案的URL已经被“移动或删除”。 - kkurian