在不同屏幕尺寸上的不同div定位

我正在嘗試編寫一個個人網站，我正在測試我的網站在1366x768筆記本電腦屏幕上，而且還附加了一個1920x1080顯示器。我的div的佈局在筆記本電腦上看起來很完美，但是當我將網站移動到顯示器上時，其中一個div標籤喜歡稍微移動（這很奇怪，因爲其他人看起來很好）。說明我的問題：在不同屏幕尺寸上的不同div定位

enter image description here

我想要的導航div的邊框以字母排列k和d，以及這個工程上的圖像，其顯示了筆記本電腦顯示器上很好，但你可以看到在紅色線條顯示實際的對齊方式，綠色線條顯示我想要它看起來像。

這是我的DIV + CSS：

nav{ 

    position: absolute; 
    top: 60%; 
    margin-left: 40%; 
    margin-right: 20%; 
    border: solid; 

}

我的邏輯在這裏的是，如果我用百分比爲我的定位，然後在div將適應不同的屏幕尺寸和固定停留在相同的位置，但是這並未」似乎是這樣的。任何想法如何解決它將非常感激。

來源

2014-09-12 Lukasz Medza

是否有一個父div與寬度定義？ – theMarceloR 2014-09-12 13:40:09

不，整個事情是由2個div組成，一個是文本部分和另一個導航部分。 – 2014-09-12 13:41:22

這是具有％邊距的絕對定位元素的預期行爲。 1336年左側20％的數字與1920年的數字不同。我建議不要絕對定位它。取而代之的是使用硬塊放置塊並使用邊距 – briansol 2014-09-12 13:44:17

將nav放入與徽標相同的div（可以說class .container）。

.container { position:relative; }

現在只需將nav相對於.container放置即可。它應該在任何決議。

來源

2014-09-12 13:45:59

對不起，我的英語糟糕，我練（我希望能明白你的要求）

如果你想使用絕對位置，你就試試這個：插入NAV到文本容器中，然後用這css

nav { 
    position: absolute; 
    top: "your percentage"; 
    left:0; 
    right:0; 
    margin:0 auto; 
    border: solid; 
}

這樣，你總是中心框（根據父容器）。

來源

2014-09-12 13:49:16

在不同屏幕尺寸上的不同div定位

回答

相關問題