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

Question

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

但我找不到将它们放在那里的方法......将它们放在最左边和最右边很容易，但我希望它放在中间，这有点问题。我设法让它在 90% 的浏览器中运行（绿色解决方案），但它并不完美，在一些流行的浏览器中也无法运行。

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

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

Answer 1

类似this 的东西？

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

检查是否适合您。

---

我在这里复制代码，以“面向未来”（如果有一天 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);
})

Answer 2

是的，你可以。在 50% 处使用左侧或右侧，然后根据您使用的方式向左或向右调整边距。 假设你的盒子有 100px 宽度：

#box1{
    position: fixed;
    right: 50%;
    margin-right:-300px; //adjust more or less as you want
}
#box2{
    position: fixed;
    left: 50%;
    margin-left:-300px; //adjust more or less as you want
}