Question

在视口达到最大宽度后，我在浏览器右侧正确对齐div时遇到问题。

问题div是.rghtlogo，当浏览器视口小于1200px（主体最大宽度）时，右侧正确定位：4％

但是，当浏览器视口大于1200px时，它会将边距推入主体容器内右边缘的4％而不是浏览器。

我尝试将它包装在一个没有运气的绝对定位div中，尝试浮动.rghtlogo没有运气，基本上已经采用了一个非常草率的不受欢迎的解决方法，使用多个媒体查询基本上随着浏览器变大而改变边距。然而，这个动作并不流畅。

@media (min-width:1201px){.rghtlogo{margin-right:3% !important}}
@media (min-width:1216px){.rghtlogo{margin-right:1.5% !important}}
@media (min-width:1230px){.rghtlogo{margin-right:.75% !important}}
@media (min-width:1251px){.rghtlogo{margin-right:0% !important}}
@media (min-width:1256px){.rghtlogo{margin-right:-1% !important}}

我搜索过无法解决这个问题。非常感谢任何帮助。

Answer 1

将position:fixed更改为position:relative中的.rghthdr 并将top中的right和.rghtlogo分别更改为-250px和0。

因此.rghtlogo始终相对于.rghthdr定位请参阅此更新的代码集：http://codepen.io/yogeshkhatri/pen/NPKQZg

Answer 2

更改位置：固定到位置：相对于.rghthdr 并在.rghtlogo中将顶部和右侧分别更改为-250px和0。因此.rghtlogo总是相对于.rghthdr
定位

这实际上杀死了javascript函数。谢谢你！我最终搞清楚了。

它非常愚蠢，我意识到我的.nav div是所有标题的容器，设置为100％宽度，但设置为2.5％的边距。一旦我将其更改为宽度：95％一切都已修复。

最大宽度是改变位置：固定边距

2 个答案: