CSS3水平格對齊

那麼我現在要做的是CSS3水平格對齊

|-------------------------------------------------------------| 
|-------|leftdiv-250px|centerdiv-1000px|rightdiv-250px|-------| 
|-------------------------------------------------------------|

因此，這裏的HTML

<div id="header"> 
    <div id="header-top"> 
     <div id="header-top-main"> 
     </div> 
    </div> 
    <div id="header-main"> 
     <div id="header-main-inner"> 
      <div id="header-main-left"> 
      </div> 
      <div id="header-main-center"> 
      </div> 
      <div id="header-main-right"> 
      </div> 
     </div> 
    </div> 
</div>

而這裏的CSS

#header { 
    height: 190px; 
    width: 100%; 
    background: #e5e5e5; 
    margin: auto; 
} 

#header-top { 
    height: 50px; 
    width: 100%; 
    background: #e9e9e9; 
    background-image: url(../img/header-top-bg.png); 
    -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75); 
    box-shadow:   0px 0px 10px rgba(50, 50, 50, 0.75); 
    margin: auto; 
    z-index: 999; 
    position: relative; 

} 

#header-top-main { 
    height: 50px; 
    width: 1000px; 
    margin: auto; 
} 

#header-main { 
    margin: auto; 
    width: 100%; 
} 

#header-main-inner { 
    margin: auto; 
    width: auto; 
} 

#header-main-left { 
    width: 250px; 
    height: 140px; 
    background: url(../img/header-main-left-bg.png); 
    float: left; 
} 

#header-main-center { 
    width: 1000px; 
    height: 140px; 
    background: #f7f7f7; 
    display: inline; 

} 

#header-main-right { 
    width: 250px; 
    height: 140px; 
    background: url(../img/header-main-right-bg.png); 
    float: right; 

}

所以我不確定問題是什麼，我試圖把它們都放在一個有自動保證金的包裝中，但似乎沒有工作。另一個出現的問題是它全部顯示在一行中，但是它堆疊在頁面的左側，一直延續到右側，使頁面滾動。

我想要的是，'header-main'區域以3個div爲中心。如果'header-main'區域關閉頁面，我希望它在沒有滾動的情況下繼續離開頁面。如果需要我想要做的截圖，那麼我可以提供它。

這裏將是另一個例子

--------------------|------[  header-top   ]------|------------------- 
space beyond screen |------[leftdiv][centerdiv][rightdiv]------| spce beyond screen 
--------------------|------[  navigation   ]------|-------------------

來源

2013-09-22 Peter

您可以創建一個小提琴嗎？ – avrahamcool

我絕不是經常訪問SO的人。但即使我看到這個問題至少發佈了10次。您可能會發現此頁面右側的鏈接很有幫助。 – Scott

@斯科特我看到其他人的問題並沒有太多的成功，一直在尋找一段時間。這裏是小提琴：http://jsfiddle.net/aLLya/ – Peter

我會添加浮動元素，元素的高度和父寬度的最小寬度。

#header-main-left, 
#header-main-center, 
#header-main-right { 
    float: left; 
    height: 140px; 
} 
#header-main-inner { 
    min-width: 1500px; 
}

然後停止滾動，我會說增加一個overflow: hidden;：

#header-main { 
    overflow: hidden; 
}

Fiddle

來源

2013-09-22 16:05:18 Chad

我試過使用overflow：hidden;但我還沒有取得任何成功。會讓你知道它是如何運作的。 – Peter

如果你想要，然後把'#header {overflow：hidden; }'。 – mdesdev

試過了，並取得了一些成功。然而，rightdiv出現在頁面之外。 – Peter

這將DIV定位解決您的問題，這裏有一個FIDDLE

#header-main-left, 
#header-main-center, 
#header-main-right { 
    float: left; 
    height: 140px; 
} 

#header-main-left { 
    width: 25%; 
    background: url(../img/header-main-left-bg.png); 
} 

#header-main-center { 
    width: 50%; 
    background: #f7f7f7; 
} 

#header-main-right { 
    width: 25%; 
    background: url(../img/header-main-right-bg.png); 
}

第二部分我不明白，也

「如果'header-main'區域關閉頁面，我希望它能夠在沒有滾動的情況下繼續離開頁面。「

來源

2013-09-22 16:04:28 mdesdev

由此我的意思是，整個'標題主'div在中心保持靜止，例如，如果屏幕很小，它不會影響1000px/1500px佈局，並且不會有水平滾動 – Peter

在小提琴中，我使用'body {overflow-x：hidden; }'但如果你的'header-main'是'1500px'水平滾動會出現在較小的屏幕上，除非你設置了'body {overflow-x：hidden; }'。 – mdesdev

CSS3水平格對齊

回答

相關問題