我正在寻找一种使导航箭头(红色框)以这种方式跟随屏幕的方法:



但是我找不到将它们放在那里的方法...将它们放在最左边和最右边很容易,但是我希望它在中间,这有点问题。我设法使其在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);
})

10-01 16:56
查看更多