最大宽度正在改变位置:固定边距

Max-width is changing position:fixed margin

本文关键字：位置 改变      更新时间：2023-09-26

视口达到最大宽度后，我在浏览器右侧正确对齐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}}

我已经搜索了如何解决此问题，但无济于事。任何帮助将不胜感激。

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

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

更改位置：

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

这实际上杀死了javascript函数。谢谢！我最终确实想通了。

这真的很愚蠢，我意识到我的 .navdiv 是所有标题的容器，设置为 100% 宽度，但设置为 2.5% 的边距。一旦我将其更改为宽度：95%，一切都已修复。

相关文章：