1

I'm looking for a way to make navigation arrows (red boxes) follow the screen this way:

enter image description here

But I can not find a way to put them there... it would be very easy to put them to the very left and very right but I'd like it to be in the middle and it's a bit problematic. I managed to make it work in 90% of browsers (green solution) but it's not perfect and it doesn't work in some popular browsers.

UPDATE #1: There's one more important thing - I'd like red boxes to be sometimes above 600px content (on small resolutions around 600px and below).

UPDATE #2: 600px container has actually: max-width: 1600px; width: 90%; and 600px is just an example resolution to better illustrate the gap.

4

2 回答 2

1

像这样的东西？

您可以使用 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);
})
于 2013-02-05T14:01:57.253 回答
1

是的你可以。在 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
}
于 2013-02-05T13:44:50.007 回答