流式布局

上述图片的流式布局顺序为 左一，左二，右一，右二

 

                                                                                     第一步                                                                                     

1.将四个div放在picbox类的div  里。 左一左二div大小一致，共用left 类;

  <div class="picbox">
          <!--左一-->
          <div class="left"> </div>
          <!--左二-->
          <div class="left"> </div>
        </div>
          <!--右一-->
          <div class="right1"> </div>
          <!--右二-->
          <div class="right2"> </div>
        </div>
      </div>

                                                                                  第二步                                                                                      

picbox 中使用-webkit-column-count 决定每行的数量， -webkit-column-gap 决定行元素的间距。

子元素就不用设置float属性了

 

注意右一距离左二的margin-top边距应为右二超出左二的高度

.picbox{
    height: 8.55rem;
    width: 6.22rem;
    margin-left: 0.09rem;
    position: relative;
    -webkit-column-count: 2;
    -webkit-column-gap:0.08rem;}
.left{

    width: 3.06rem;
    height: 4rem;
    background: white;
    margin-top: 0.1rem;
}
.right1{
    
    width: 3.06rem;
    height:2.87rem;
    background: white;
    margin-top: 0.5rem;
    
}
.right2{
    width: 3.06rem;
    height: 5.55rem;
    margin-top: 0.1rem;
    background: white;
}