別のdivが右に浮かんでいるときに、あるdivを中央揃えしますか？ここ

Question

は私の例です：

<div id="mainContainer"> 
    <div id="itemIWantToCenter"></div> 
    <div id="itemIwantFloatedRight"></div> 
</div> 

mainContainerwidth幅を100％に設定されています。 itemIwantFloatedRightの幅は300pxに設定されています。 itemIWantToCenterの幅が200ピクセルであるとします。どのようにコンテナ内で他のものを浮かべながら、そのdivを中心に置くでしょうか？ありがとう！このソリューションへ

Answer 1

あなたがofcourseのリンクスタイルシートを使用する必要があります...

<div id="mainContainer" style="width:100%; border:solid 1px red;"> 
    <div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right"> 
    right 
    </div> 
    <div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;"> 
    center 
    </div> 
</div> 

Answer 2

はここに私の解決策のfiddleだとコードは（固定リンク）を下回っている

利点は、そのときの親でありますコンテナのサイズが変更されると、コンテンツコンテナは拡大され、余白は維持され、右側のサイドバーは常に右側に残ります。

これが役に立ちます。

注フィドルでは、contentコンテナは少しスリムです。これは、ウィンドウのサイズによるものです。メリットを確認するには、ウィンドウのサイズを変更する（分割線を上に移動し、クリックしてドラッグする）。

<div class="container"> 
    <div class="content"> 
     centered content 
    </div> 
    <div class="right"> 
     right 
    <div> 
</div> 

---

.container { 
    width:100%; 
    position:relative; 
} 

.container .content { 
    width:auto; 
    margin:0 200px; 
    background:green; 
} 

.container .right { 
    width:200px; 
    position:absolute; 
    top:0px; 
    right:0px; 
    background:#f00; 
} 

.content, .right { 
    height:300px 
} 

Answer 3

・ホープこのことができます：

<div id="mainContainer"> 
    <div id="itemIWantToCenter" style="float: right;"></div> 
    <div id="itemIwantFloatedRight" style="margin-left: 50%;"></div> 
</div>