css - 我怎样才能让我的随机橙色框向上并在其上方的另一个橙色框下方？

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; 
} 

提琴手

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

首先，您不能使用任何具有相同 id 的 div，您有 2 个具有box5id 的 div 和 2 个具有 id 的 div box3，请考虑将它们更改为使用 aclass而不是 an id。然后

您应该clear:both在要放置在其他底部的 div 上使用。

例如：

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