Layout of cascade flow in CSS

Time:2020-12-6

1、 Effect picture

Layout of cascade flow in CSS

2、 Code

<!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;
        /*Specify column width*/
        /* column-width:500px; */
        /*Specifies the spacing between columns*/
        column-gap: 10px;
        /*Specifies the style of column to column gap*/
        /*column-rule:2px dotted red*/
        /*Corresponding to the following three properties*/
        /* 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 />
        </div>
        <div class="item">
            <img />
        </div>
        <div class="item" style="height: 120px;">
            <img />
        </div>
        <div class="item" style="height: 500px;">
            <img />
        </div>
        <div class="item">
            <img />
        </div>
        <div class="item">
            <img />
        </div>
        <div class="item">
            <img />
        </div>
        <div class="item" style="height: 100px;">
            <img />
        </div>
        <div class="item">
            <img />
        </div>
        <div class="item">
            <img />
        </div>
        <div class="item">
            <img />
        </div>
        <div class="item">
            <img />
        </div>
    </div>
</body>

Recommended Today

Regular expression sharing for checking primes

This regular expression is shown as follows: Regular expressions for checking prime numbers or not To use this positive regular expression, you need to convert the natural number into multiple 1 strings. For example, 2 should be written as “11”, 3 should be written as “111”, 17 should be written as “11111111111”. This kind of […]