3

SO内でこの質問のバリエーションをたくさん見つけましたが、何を試しても、これ（非常に単純なようです！）を機能させることができないようです！

私がやろうとしているのは、ビューポートの中央に「中央に配置された」 divを保持し、「サイドバー」のdivをその右側に直接配置することです（つまり、ビューポートに右揃えではありません） 。中央揃え' div。

jsfiddleのテストコードは次のとおりです。

http://jsfiddle.net/6wCyr/13/

私が読んだすべてのことは、floatプロパティがまさに私が探しているものであることを示唆しているようですが、リンクの結果は、右側のサイドバーが「中央の」divの横ではなく下に配置されているという奇妙な結果を示しています。それがリンクに示されているものです。

また、適切なプロパティに負の値を使用し、サイドバーの幅を正確に設定するという解決策も見ましたが、それもうまくいきませんでした。

うまくいけば、この質問は私が思うほど簡単に解決できます！div内などで適切なdivのセットを見つけることができないようです。これらの配置の問題をデバッグするのは難しいです！

ありがとう！

4

3 に答える 3

5

ライブデモ

  • 中にdiv.sidebar入っdiv.centeredた。
  • に追加position: relativeしましたdiv.centered。
  • この手法を使用しています。
  • で固定幅を宣言する必要はありませんdiv.sidebar。

CSS：

div.centered {
    margin-left: auto;
    margin-right: auto;
    border: dashed;
    width: 100px;
    height: 100px;
    position: relative
}

div.sidebar {
    border: dotted;
    position: absolute;
    top: 0;
    left: 100%
}

HTML：

<div class="holder">
    <div class="centered">
        CENTERED
        <div class="sidebar">
            RIGHT SIDEBAR
        </div>
    </div>
</div>
于 2011-03-01T20:03:02.923 に答える
4

これを試して。

http://jsfiddle.net/DOSBeats/6wCyr/16/

.holder {
    margin:0 auto;
    width:100px;
}

.centered {
    border: dashed;
    float:left;
    height: 100px;
}

.sidebar {
    border: dotted;
    float:left;
    margin-right:-100px;
    width:100px;
}
于 2011-03-01T20:02:49.647 に答える
0

ホルダーに幅を設定して中央に配置しない場合、サイドバーはウィンドウの端に浮きます。

これを試して：

HTML：

<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>

CSS：

#holder{
  margin:auto;
  width:500px;
}
#sidebar{
  border:dotted;
  float:left;
  width:100px;
}
#centered{
  border:dashed;
  margin-left:110px;
  width:380px;
}
于 2011-03-01T20:04:59.190 に答える