如何将3d div移到1st div旁边?

萨迪

div里面有3div

我希望我的第三个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>    

请注意:

  1. 我没有访问HTML的权限,只能使用CSS
  2. 我不能使用绝对位置,因为第三个div高度不固定。
约翰·克拉兹克(Johann Kratzik)

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

小提琴:https : //jsfiddle.net/9whj3rL6/3

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章