码迷,mamicode.com
首页 > 其他好文 > 详细

简单几行代码实现瀑布流

时间:2019-12-19 18:54:36      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:mic   otto   width   png   box   doctype   简单   --   void   

<!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>

简单实现瀑布流

技术图片

简单几行代码实现瀑布流

标签:mic   otto   width   png   box   doctype   简单   --   void   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!