在不同屏幕尺寸上的不同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定位

回答

相关问题