如何保持固定的位置div與居中的div對齊？

不知道如何標題的問題。我有一個HTML結構是這樣的：如何保持固定的位置div與居中的div對齊？

<div id="nav"></div> 
<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div>

有了這樣一些CSS：

#nav { 
    width: 200px; 
    height: 50px; 
    margin: 0 0 0 -100px; 
    position: fixed;  
    left: 50%; 
    background: red; 
} 

#wrapper { 
    width: 250px; 
    height: 1000px; 
    margin: 0 auto; 
    background: blue; 
} 

#content { 
    width: 200px; 
    height: 1000px; 
    margin: 0 auto; 
    background: green; 
}

該包裝比內容更廣泛，並且內容在包裝居中。我的問題是保持固定在頁面頂部的導航div，當窗口小於包裝div時，將div居中/與內容div對齊。當您向左和向右滾動時，問題出現，固定格保持居中在窗口中，內容div向左和向右滾動。我試圖做到這一點沒有JavaScript。

下面是我正在運行的jsfiddle，調整結果窗口的大小以查看當窗口小於包裝div時nav div不會保持居中/與內容div對齊。

http://jsfiddle.net/p2Mzx/1/

提前感謝！

來源

2012-03-23 codybuell

您正在測試什麼瀏覽器？在Chrome中，這對我很有用。 – 2012-03-23 02:29:24

目前的Safari，並沒有在我的終端上使用Chrome。嘗試縮小結果窗口，使其小於包裝div。我需要導航以符合內容。 – codybuell 2012-03-23 02:34:27

最簡單的解決辦法是把#nav在#wrapper，並給它25像素的水平邊距：

HTML：

<div id="wrapper"> 
    <div id="nav"></div> 
    <div id="content"> 
    </div> 
</div>

CSS：

#nav { 
    width: 200px; 
    height: 50px; 
    margin: 0 25px; 
    position: fixed; 
    top: 0; 
    background: red; 
} 

#wrapper { 
    width: 250px; 
    height: 1000px; 
    margin: 0 auto; 
    background: blue; 
} 
#content { 
    width: 200px; 
    height: 1000px; 
    margin: 0 auto; 
    background: green; 
}

另見fiddle 。

來源

2012-03-23 02:39:50 jeroen

如果縮小結果窗口然後滾動到右側，則導航欄和內容div不會保持對齊狀態。 – codybuell 2012-03-23 03:32:10

嘗試使結果窗口的一半大小的包裝div然後滾動到右側。導航div和內容div不保持一致。關於如何讓他們在一起的任何想法？這裏有一個更大的jsfiddle來強調這個問題：http://jsfiddle.net/p2Mzx/24/ – codybuell 2012-03-23 12:37:02

@codybuell你是對的，我只是調整了窗口，它似乎工作。我不認爲你可以使用CSS來解決這個問題，除非你使用媒體查詢來生成響應式設計而不是固定的設計。 – jeroen 2012-03-23 13:54:13

我想你也可以爲nav添加margin: 0 auto。

然後，nav將被定位到父元素，就像包裝一樣，居中。但刪除了固定的表單導航。 position:fixed使它定位到瀏覽器窗口並排除流量。你想要嗎？

來源

2012-03-23 03:32:12 Eleven

將nav放在包裝中，恰好位於內容之上會更合適。

<div id="wrapper"> 
    <div id="nav"></div> 
    <div id="content"></div> 
</div>

nav的CSS可以有25px的左右邊距。絕對定位和寬度也是不需要的。

#nav { 
    height: 50px; 
    margin: 0px 25px 0px 25px; 
    background: red; 
} 

#wrapper { 
    width: 250px; 
    height: 1000px; 
    margin: 0 auto; 
    background: blue; 
} 

#content { 
    width: 200px; 
    height: 1000px; 
    margin: 0 auto; 
    background: green; 
}

請參閱此琴：http://jsfiddle.net/p2Mzx/20/

來源

2012-03-23 03:34:09 angelorohit

導航div需要留在窗口的頂部。 – codybuell 2012-03-23 03:36:24

可以固定在導航和內容給予padding-top。

考慮此鏈接jsfiddle

來源

2012-03-23 04:17:38

嘗試使結果窗口大小爲包裝div的一半，然後向左和向右滾動。導航div和內容div不保持一致。關於如何讓他們在一起的任何想法？這裏有一個更大的jsfiddle來強調這個問題：http://jsfiddle.net/p2Mzx/23/ – codybuell 2012-03-23 12:32:37

如何保持固定的位置div與居中的div對齊？

回答

相關問題