多列布局如何实现？

目录

前言

一、浮动加百分数平分

二、使用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