流式布局

最新推荐文章于 2023-10-25 10:00:41 发布

weixin_30247159

最新推荐文章于 2023-10-25 10:00:41 发布

阅读量63

点赞数

原文链接：http://www.cnblogs.com/zcancandice/p/5737832.html

版权

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

第一步

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