如何將我的隨機橙色盒子放在上面的橙色盒子下面？

Question

嗨，這可能嗎？我已經嘗試了所有需要將橙色盒子放在另一個橙色盒子下面的東西？這是我的代碼，我瘋了！

<div id="container"> 

    <div id="nav1"></div> 
    <div id="nav2"></div> 

    <div id="box3"></div> 
    <div id="box4"></div> 
    <div id="box5"></div> 
    <div id="box5"></div> 
    <div id="box3"></div> 

</div> 

CSS

#box3 
{ 
    width:250px; 
    height:200px; 
    background-color:#F30; float:left; 
} 
#box4 
{ 
    width:500px; 
    height:400px; 
    background-color:#F00; 
    float:left; 
} 
#box5 
{ 
    width:250px; 
    height:200px; 
    background-color:#C00; 
    float:left; 
} 

Jsfiddle

Answer 1

的jsfiddle：http://jsfiddle.net/W5uE3/

HTML：

<div id="container"> 

    <div id="nav1"></div> 
    <div id="nav2"></div> 

    <div id = 'cont1'>  
     <div class="box3"></div> 
     <div class="box3"></div> 
    </div> 
    <div id="box4"></div> 
    <div class="box5"></div> 
    <div class="box5"></div> 
</div>​​​​​​​​​​​​​​​​​ 

CSS：

#container { 
    width: 1000px; 
} 
.box3{ 
    width:250px; 
    height:200px; 
    background-color:#F30; 
    float:left; 
} 
#box4{ 
    width:500px; 
    height:400px; 
    background-color:#F00; 
    float:left; 
} 
.box5{ 
    width:250px; 
    height:200px; 
    background-color:#C00; 
    float:left; 
} 
#cont1 { 
    float: left; 
    width: 250px; 
} 

你並不需要使用的z-index，只是一個額外的容器。並將多個ID更改爲類。

Answer 2

首先，你有2個格與box5 ID和2點div的id爲box3，請考慮改變這些，你不能使用相同ID的DIV使用class而不是id。 然後

你應該使用clear:both你想放在底部其他的div。

例如：

<div id="box4" style="clear:both"></div> 
<div id="box3" style="clear:both"></div>