Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 我怎样才能把我随机的橙色盒子放在上面的另一个橙色盒子下面?_Css - Fatal编程技术网

Css 我怎样才能把我随机的橙色盒子放在上面的另一个橙色盒子下面?

Css 我怎样才能把我随机的橙色盒子放在上面的另一个橙色盒子下面?,css,Css,嗨,这可能吗?我已经试过了所有我需要的方法把那个橙色的盒子放在另一个橙色的盒子下面?这是我的密码,我快疯了 <div id="container"> <div id="nav1"></div> <div id="nav2"></div> <div id="box3"></div> <div id="box4"></div> <div id=

嗨,这可能吗?我已经试过了所有我需要的方法把那个橙色的盒子放在另一个橙色的盒子下面?这是我的密码,我快疯了

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

首先,你不能使用同一个ID的任何div,你有2个div的带有BOX5 ID和2个div的ID Box 3,请考虑改变这些来使用一个类而不是ID。 然后

您应该在要放置在底部的div上使用clear:bother

例如:

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

首先,你不能使用同一个ID的任何div,你有2个div的带有BOX5 ID和2个div的ID Box 3,请考虑改变这些来使用一个类而不是ID。 然后

您应该在要放置在底部的div上使用clear:bother

例如:

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

html:

您不需要使用z-index,只需要一个额外的容器。并将多个ID更改为类。

jsiddle:

html:


您不需要使用z-index,只需要一个额外的容器。并将多个ID更改为类。

这就是我试图实现的,如果这有助于任何,这就是我试图实现的,如果这有助于任何,我用相同的IDI删除你的div值得告诉OP使用类,而不仅仅是说删除它们。我用相同的IDI删除你的div值得告诉OP使用类,不要只是说要删除它们。你能告诉我Id和类之间的区别吗?@user1731516查看此链接:@user1731516你可以通过单击答案左侧的勾号接受答案;您能告诉我Id和类之间的区别吗?@user1731516查看此链接:@user1731516您可以通过单击答案左侧的勾号接受答案;
<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>​​​​​​​​​​​​​​​​​
#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;
}