Выравнивание вложенных DIVs

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

Просто используйте Bootstrap строк и столбцы метод

<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