ネストされたDIVを整列する

Question

ウェブページ内にDIVのグループを作成しようとしていますが、私が望むようなレイアウトを得ることができません。私がしたいことはこれです...

<div id='participation_All' style="height:100%"> 
    <div id='participation_Left' style="width: 100%; min-height: 600px"> 

    <div id='part_bargauge' style='float: left; width: 70%'></div>  
    <div id='part_listbox'></div> 

    </div> 
<div id='participation_Right' style="width: 100%; min-height: 600px"> 
    </div> 

</div> 

問題は、私はそれを必要な場所part_Listboxが表示されないです...ここで

私のコードがある（国境は必要ありません）。代わりに、画面の左側、part_Allの下に表示されます。私が間違って何をしているのか？

Answer 1

すでに示唆したように、私は、ブートストラップのようなフレームワークを使用することをお勧めします。

<div class='main' style='display:block; width:100%; height:100%; background-color:green;'> 
    <div class='left' style='margin:10px;width:50%; height:90%; background-color:yellow; float:left;'> 
     <div class='inner_left' style='margin:10px;width:40%; height:90%; background-color:purple; float: left;'></div> 
     <div class='inner_right>' style='margin:10px;width:40%; height:90%; background-color:grey; float: right;'></div> 
     <div class='clear' style='clear: both;'></div> 
    </div> 
    <div class='right' style='margin:10px;width:30%; height:90%; background-color:blue; float:right;'> 
    </div> 
    <div class='clear' style='clear: both;'></div> 
</div> 

私は、少なくともインラインCSSをスキップしてフィナーレページ原因この種に含まれるCSSファイルに移動します：あなたがあなたのニーズに合わせて、以下のコードを編集することができずに、あなたはそれをしたい場合のコードは非常にメンテナンスのために貧しいです。 （しかし最後の選択肢;-)）

Answer 2

単に使用ブートストラップ行と列の方法

<div class="row"> 
    <div class="col-md-12"> 
     <div class="row"> 
      <div class="col-md-8">Left side Content goes here</div><div class="col-md-4"> Right Side Content</div> 
     </div> 
    </div> 
</div> 

Answer 3

「float：left」というスタイルをpart_Listboxにも追加します。

ここでは、あなたが演奏できるレイアウトと色のコードペンがあります。 http://codepen.io/anon/pen/ONYOxL?editors=1010

<div id='part_all' style="height:500px; background-color:gray"> 
<div id='part_left' style='width:45%; height: 300px; margin:2%; background- color:orange; float:left'> 
    <div id='part_Bargauge' style='margin:2%; color:white; float: left; height: 80%; width: 70%; background-color:green;'>part_Bargauge</div> 
    <div id='part_Listbox' style="margin:2%;color:white; float:left; height:80%; width: 20%; background-color:purple;">part_Listbox</div> 
</div> 
<div id='part_Right' style='color:white; float: left; width: 45%; min-height:300px; background-color: blue; margin: 2%;'>part_Right 
    </div> 
</div> 

フロート要素は基本的にお互いの「意識」であり、あなたがそれらをに期待するか機能します。しかし、要素は相対的な位置にデフォルト設定され、基本的にフローターの下に落ちます。

フレックススタイリングも試してみてください。 http://www.w3schools.com/cssref/css3_pr_flex.asp