我div
里面有3秒div
。
我希望我的第三个div在第一个divdiv
旁边div
,第二个div在第一个div之下。
请检查这张图片:
我已经使用了flex
属性并且可以使用,但是我的第二个属性div
在第三个属性之下。
#container{
background-color: #fff;
padding: 50px;
display: flex;
flex-wrap: wrap;
}
#n1{
width: 20%;
order: 1;
height:150px;
background-color:yellow;
}
#n2{
width: 20%;
order: 3;
clear:right;
height:180px;
background-color:green;
}
#n3{
width:80%;
order: 2;
height:500px;
background-color:red;
}
<div id="container">
<div id="n1">
n1 text...
</div>
<div id="n2">
n2 text...
</div>
<div id="n3">
n3 text...
</div>
</div>
请注意:
作为flexbox的替代方法,您可以使盒子浮动:
#container {
background-color: #fff;
padding: 50px;
}
#n1 {
float: left;
width: 20%;
height:150px;
background-color:yellow;
}
#n2 {
clear: left;
float: left;
width: 20%;
height:180px;
background-color:green;
}
#n3 {
margin-left: 20%;
width:80%;
height:500px;
background-color:red;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句