乐趣区

关于css3:css多列瀑布流布局

一、效果图

二、代码

<!DOCTYPE html>
<html>
<head>
<style>
    /* https://www.cnblogs.com/bbc66/p/9434217.html */
    html,body{padding: 0;margin: 0;}
    .box {
        padding: 10px;
        /* display: flex;
        flex-flow:column wrap; */
        /* height: 100vh; */
        column-count:2;
        /* 指定列宽 */
        /* column-width:500px; */
        /* 指定列与列之间的间距 */
        column-gap: 10px;
        /* 指定列与列之间间隙的款式 */
        /*column-rule:2px dotted red*/
        /* 绝对应上面的三个属性 */
        /* column-rule-color:red;
        column-rule-style:dotted;
        column-rule-width:2px; */
    }
    .item {
        /* margin: 10px; */
        margin-bottom: 10px;
        /* width: calc(100%/3 - 20px); */
        height:300px;
    }
    .item img{
        width: 100%;
        height:100%;
        background: pink;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="item" style="height: 200px;">
            <img src="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img src="show.jpg" alt="" />
        </div>
        <div class="item" style="height: 120px;">
            <img src="cloth.jpg" alt="" />
        </div>
        <div class="item" style="height: 500px;">
            <img src="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img src="banner.jpg" alt="" />
        </div>
        <div class="item" style="height: 100px;">
            <img src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img src="banner.jpg" alt="" />
        </div>
    </div>
</body>
退出移动版