站内导航
新闻
影视
游戏
小说
旅游
购物
体育
css3瀑布流实现
2019/01/22    

重点：

column-count:2;
break-inside: avoid;

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta property="og:title" content="标题" />
    <meta name="format-detection" content="telephone=no,email=no,adress=no"/>
    <title></title>
   <style type="text/css" media="screen">
   img{
    max-width: 100%;
   }
    .list .bd{
            column-count:2;
            column-gap: .24rem;
            display:block;
    }
    .list .bd .item{
            display:flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: flex-start;
            break-inside: avoid;
            margin-bottom: .24rem!important;
    }
    </style>
</head>
<body>
    <div class="list mb25">
            <div>
                <a href="">
                    <img src="images/1.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/2.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/3.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/4.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/5.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/6.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/7.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/8.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/9.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/10.jpg" alt="">
                </a>
            </div>
    </div>
</body>
</html>


上一篇:
下一篇:

静水缘首页

刘丕水+宋静静=静水刘丕水+宋静静于2007年9月相识于山东理 工大学，毕业后2011年相恋，共甘苦，历 时四年，终于在11月23号拿到了红本本， 组建了自己的小家庭......
快速发布

文章分类

最新文章