2

さて、私はウェブサイトを持っていて、全体がコンテナに包まれています。このコンテナは、margin:auto で中央揃えされます。この中央のコンテナの右側にコンテンツをフロートさせ、ユーザーがブラウザウィンドウのサイズを変更した場合などに、コンテンツを横に固定したいと思います。本当に簡単な方法があるかどうか疑問に思っています別の巨大な div を追加するのではなく、これを行い、幅を与え、中央部分を左に、コンテンツの一部を右に浮かせます。ありがとう！

4

5 に答える 5

4

@NickAllen に便乗して、絶対配置を使用して、サイドバーの幅がプライマリ コンテナーのセンタリングに含まれないようにします。 

#container {
  position: relative;
  width: 500px;
  border: 1px solid #f00;
  margin: 0px auto;
}
#sidebar {
  position: absolute;
  width: 200px;
  right: -200px;
  border: 1px solid #0f0;
}
<div id="container">
  <div id="sidebar">
    [ sidebar content ]<br>
    [ sidebar content ]<br>
  </div>
  [content]<br>
  [content]<br>
  [content]<br>
</div>

于 2009-05-08T16:07:58.050 に答える
1

たぶん私はあなたの質問を誤解していますが、これはあなたが望むものではありません:

    #container {
        width: 960px;
        margin: 0px auto;
    }
    
    #sidebar {
        float: right;
    }
<div id="container">
        <div id="sidebar">
        some content
        </div>
    </div>

于 2009-05-08T21:54:48.793 に答える
0

古い質問ですが、他の回答にはその「何か」が欠けていて、まだGoogleの上にあるので貢献しています。これを実現する最も簡単でクリーンな方法は、2 つのラッパーを使用することです。

<div class="bigWrapper">
  <div class="sidebar">Hello, I'm your sidebar</div>      

  <div class="smallWrapper">
    Put the thing you want to center here.
  </div>
</div>

次のCSSを使用：

.bigWrapper { 
    width: 1000px;
    height: auto;
    margin: auto;
}

.smallWrapper {
    width: 500px;
    height: auto;
    margin: auto;
}

.sidebar {
    width: 250px;
    float: left;
    height: auto;
}
于 2014-03-12T15:47:10.507 に答える
0

コンテナー div にプロパティ position: relative; を指定します。フローティングdivをコンテナdivの最初の子として配置し、それを与えます

#floatingDiv
{
    position: absolute;
    top: 0;
    right: -{widthOfFloatedDiv};
}

私はそれがうまくいくと思うが、テストされていない

さて、それをテストし、動作します

<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;">
    <div style="position: absolute; top: 0; right: -200px; width: 200px;">
        <p>Floated DIV</p>
    </div>
    <p>container div</p>
</div>
于 2009-05-08T16:02:13.353 に答える
-1

フローティングはこれを行うための方法です。コンテナーが幅の合計よりも小さい場合を除き、それらは常にくっつきます。

ヒント: コンテナーが両方の内部 div を保持するのに十分な幅であることを確認してください。そうでない場合、ユーザーのウィンドウが狭い場合は、上下に表示されます。

于 2009-05-08T16:00:56.523 に答える