视口达到最大宽度后,我在将浏览器右侧的div正确对齐时遇到问题。
This Codepen shows the issue.
问题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}}
我没有搜索如何解决此问题。任何帮助是极大的赞赏。
最佳答案
在position:fixed
中将position:relative
更改为.rghthdr
并将top
中的right
和.rghtlogo
分别更改为-250px
和0
。
因此,.rghtlogo
始终相对于.rghthdr
定位。
请参阅此更新的代码笔:http://codepen.io/yogeshkhatri/pen/NPKQZg
关于javascript - 最大宽度正在更改位置:固定边距,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26880219/