如何将两个div彼此相邻但仍位于中心位置

时间:2011-09-08 03:12:12

标签: html css css3

我真的很挣扎,已经有一段时间了。

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

但是,现在我想在红色div的左边添加另一个div,在大约10pixels之间有一些边距。然而,当我这样做时,一切都向右移动,我的背景中的徽标被div阻挡。示例:http://jsbin.com/ubanuf/10

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

为什么我不能将黄色div放在红色div旁边,其间距为10 px

我的要求是:

  • 红色div为750 px
  • 黄色div约为200像素
  • 彼此相邻,两者之间的差距约为10 p
  • 并且不应该阻止蜜蜂图像

这可以吗?

1 个答案:

答案 0 :(得分:1)

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

添加了一个包含div的包含div:auto和两个div的固定宽度和边距(如果你想增加你需要增加这个包装的大小的余量)