首页 > 其他 > 详细

简单几行代码实现瀑布流

时间:2019-12-19 19:15:15      阅读:91      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
<!-- 
 author : wsj
 aim : bky
 date : 2019-12
 bug : no
 -->
    <body>
        <style>
            .father{
                width: 100%;
                  box-sizing: border-box;
                 column-count: 2;
                  column-gap:15rpx;
                  padding: 0 20rpx;
            }
            .list{
              box-sizing: border-box;
              overflow: hidden;
              break-inside: avoid;
              border: 1px solid #efefef;
              border-radius: 5rpx;
              margin-bottom: 15rpx;
              background: #ffffff;
            }
        </style>
        <div class="father">
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
        </div>

    </body>
</html>

简单实现瀑布流

技术分享图片

简单几行代码实现瀑布流

原文:https://www.cnblogs.com/wsjaizlp/p/12069328.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!