对齐嵌套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

我建议使用像bootstrap这样的框架，如前所述。如果您想这样做，可以根据需要编辑以下代码：

<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

添加样式＆＃34; float：left＆＃34;到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>

浮动元素基本上是＆＃39;意识到＆＃39;彼此之间的关系将起到你期望他们的作用。但是元素将默认为相对位置并且基本上落在浮动之下。

尝试使用flex样式。 http://www.w3schools.com/cssref/css3_pr_flex.asp