多列布局如何实现？

目录

前言

一、浮动加百分数平分

二、使用display:table布局

三、使用column布局

四、使用flex布局

---

前言

多列布局实现的效果图为：

实现的方法如下 

---

一、浮动加百分数平分

        .col {
            float: left;
            width: 25%;
            height: 300px;
        }

        .col1 {
            background-color: blue;
        }

        .col2 {
            background-color: blueviolet;
        }

        .col3 {
            background-color: aqua;
        }

        .col4 {
            background-color: beige;
        }

    <div class="box">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
    </div>

二、使用display:table布局

        .box {
            display: table;
            width: 100%;
            /*table-layout: fixed;*/
        }

        .col {
            display: table-cell;
            height: 300px;
            width: 25%;
        }
        
        .col1 {
            background-color: blue;
        }

        .col2 {
            background-color: blueviolet;
        }

        .col3 {
            background-color: aqua;
        }

        .col4 {
            background-color: beige;
        }
    <div class="box">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
    </div>

三、使用column布局

        .box {
            column-count: 4;
            column-gap: 0;
        }

        .col {
            height: 300px;
        }

        .col1 {
            background-color: blue;
        }

        .col2 {
            background-color: blueviolet;
        }

        .col3 {
            background-color: aqua;
        }

        .col4 {
            background-color: beige;
        }
    <div class="box">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
    </div>

四、使用flex布局

        .box {
            display: flex;
        }

        .col {
            flex: 1;
            height: 300px;
        }

        .col1 {
            background-color: blue;
        }

        .col2 {
            background-color: blueviolet;
        }

        .col3 {
            background-color: aqua;
        }

        .col4 {
            background-color: beige;
        }
    <div class="box">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
    </div>