html - 相对于 DIV 的固定容器——这可能吗？

Question

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

但我找不到将它们放在那里的方法...将它们放在最左边和最右边会很容易，但我希望它在中间，但有点问题。我设法让它在 90% 的浏览器中工作(绿色解决方案)，但它并不完美并且在一些流行的浏览器中不起作用。

更新 #1:还有一件更重要的事情 - 我希望红框有时超过 600 像素的内容(在 600 像素及以下的小分辨率上)。

更新 #2:600px 容器实际上有:max-width: 1600px; width: 90%; 和 600px 只是一个示例分辨率，以更好地说明差距。

Answer 1

类似于 this ？

您可以使用 max-width 来测试多个宽度。

检查是否适合您。

---

我在这里复制代码，以“面向 future ”(如果有一天 codepen 消失)

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);
})