1

ナビゲーション矢印（赤いボックス）を次のように画面に従わせる方法を探しています。

ここに画像の説明を入力してください

しかし、そこに配置する方法が見つかりません...非常に左と右に配置するのは非常に簡単ですが、中央に配置したいので、少し問題があります。私はそれをブラウザの90％で動作させることができました（グリーンソリューション）が、それは完璧ではなく、いくつかの人気のあるブラウザでは動作しません。

更新＃1：もう1つ重要なことがあります。赤いボックスを600px以上のコンテンツにすることがあります（600px以下の小さな解像度の場合）。

更新＃2：600pxコンテナには実際には：がmax-width: 1600px; width: 90%;あり600pxます。これは、ギャップをわかりやすく説明するための解決策の例にすぎません。

4

2 に答える 2

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 に答える
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 に答える