我正在寻找一种使导航箭头(红色框)以这种方式跟随屏幕的方法:
但是我找不到将它们放在那里的方法...将它们放在最左边和最右边很容易,但是我希望它在中间,这有点问题。我设法使其在90%的浏览器中都可以使用(绿色解决方案),但是它并不完美,并且在某些流行的浏览器中也不起作用。
更新#1:还有一件重要的事情-我希望红色框的内容有时超过600px(在600px或以下的小分辨率下)。
更新#2:600px容器实际上具有:max-width: 1600px; width: 90%;
和600px
只是一个示例分辨率,可以更好地说明这一差距。
最佳答案
this之类的东西?
您可以使用最大宽度来测试多个宽度。
检查是否适合您。
我在此处复制代码,以确保“面向未来”(如果一天的密码笔消失了)
的HTML
<div id="buttons">
<div id="left">L</div>
<div id="right">R</div>
</div>
<div id="foobar">
<div id="content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
的CSS
#foobar {
max-width: 800px;
margin: 0 auto;
padding: 0 50px;
}
#content {
background-color: #ddd;
}
#buttons {
width: 700px;
margin-left: -350px;
background-color: #aaa;
position: fixed;
left: 50%;
top: 50%;
}
#left, #right {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#right {
right: 0
}
JS(JQUERY)
$(function(){
refresh_buttons = function(){
w = $('#foobar').width() + 100;
$('#buttons')
.css('width', w)
.css('margin-left', -w/2);
};
refresh_buttons();
$(window).resize(refresh_buttons);
})