javascript - 最大宽度正在改变位置 :fixed margin

标签 javascript css

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

This Codepen shows the issue.

问题 div 是 .rghtlogo,当浏览器视口(viewport)小于 1200px(正文最大宽度)时正确定位为 right:4%

但是,当浏览器视口(viewport)大于 1200 像素时,它会将边距推到主体容器内部右边缘的 4%,而不是浏览器。

我尝试将它包装在一个绝对定位的 div 中,但没有成功,尝试 float .rghtlogo 没有成功,并且基本上已经诉诸了一个非常草率的不受欢迎的解决方法,使用多个媒体查询来基本上随着浏览器变大而改变边距。然而,这个 Action 并不流畅。

@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中的topright分别修改为-250px0

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

关于javascript - 最大宽度正在改变位置 :fixed margin,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26880219/

相关文章:

css - Primefaces CSS 中的 "Element "选择器

javascript - 根据下拉列表的值隐藏和显示一行表 - jquery

javascript - 在 React 中将 props 从 Parent 传递给 child 并使用 map 循环?

javascript - Jest "Cannot log after tests are done. Did you forget to wait for something async in your test?"

html - 从 HTML 表格中移除边框

css - Chrome 中的错误或糟糕的 CSS? (隐藏可见性的 anchor )

javascript - 从对象内的其他属性值设置属性值

javascript - 为什么jquery脚本没有将@Model传递给 Controller ​​的action参数?

CSS |在 Bootstrap 列中分层多个居中的 div

javascript - 从具有特定 css 样式的类中获取所有元素