2011-09-08 51 views
4

我真的很苦惱,並已在它的相當一段時間。如何定位兩個div彼此相鄰,但仍然在中心

我有一個帶有徽標的背景圖片,我希望在中心有一個div,這樣它就不會在背景中阻擋BEE圖片。這裏的工作示例(這是好的,因爲它不會阻止圖像):http://jsbin.com/ubanuf/9

但是,現在我想添加另一個紅色右邊的權利,左邊的紅色div與約10pixels之間的一些保證金。但是,當我這樣做時,一切都向右移動,我的背景圖標被div阻擋。示例在這裏:http://jsbin.com/ubanuf/10

如果我從main-controller刪除margin: 20px auto 0然後看起來不錯,直到我看1680 X 1050分辨率的頁面。在這個決議中,一切似乎都向左移動。所以現在在紅色格子停止和蜜蜂圖像開始之間存在巨大差距。屏幕截圖在這裏:http://i53.tinypic.com/25qqk4h.png

爲什麼我不能把黃格旁邊的紅格與它們之間10像素的保證金

我的要求是:

  • 紅格爲750像素
  • 黃色DIV爲大約200像素
  • 兩個彼此相鄰與之
  • 和蜂圖像之間約10像素邊緣不應該被阻止

這可能嗎?

回答

1

什麼:http://jsbin.com/ubanuf/12/

增加了包裝的div保證金:汽車,雙方的div的固定寬度和幅度(如果你想增加你需要增加此包裝藏漢大小的保證金)

+0

這將以'1280 x 1024'分辨率阻止圖像:( – Anthony

+0

這是因爲紅色和黃色的div具有固定的尺寸,因此在較低的分辨率下重疊了標誌,您設置的要求會發生衝突。中間,從不與蜜蜂重疊(但可以變得非常小),或者你有一個固定的盒子,將重疊蜜蜂 –

+0

是的,我有一點線索,這些要求衝突,但華讓更多的css經驗的人去確認一下。我將重做圖像,以便可以將蜜蜂圖像向下移動並將我的登錄信息等放入標題中。這將消除左邊的黃色div的需要 – Anthony