CSS-三列布局

主体部分

<div class="wrapper">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

第一种 flex布局

.wrapper{
            width: 100%;
            display: flex;//flex弹性布局
        }
        .left{
            background: #42B983;
            width: 33%;
            height: 100px;
        }
        .center{
            background: #7E7E7E;
            width: 33%;
            height: 100px;
        }
        .right{
            background: #FC4242;
            width: 33%;
            height: 100px;
        }

第二种 float布局

<style type="text/css">
        .wrapper{
            width: 100%; 
        }
        .left{
            background: #42B983;
            width: 33%;
            height: 100px;
            float: left;
        }
        .center{
            background: #7E7E7E;
            /* //中间栏不需要设置宽度,实际宽度为100% */
            /* width: 33%; */
            height: 100px;
        }
        .right{
            background: #FC4242;
            width: 33%;
            height: 100px;
            float: right;
        }
    </style>

<div class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 中间栏要放在最后 -->
        <div class="center"></div>
</div>

第三种 position布局

.wrapper{
            width: 100%; 
        }
        .left{
            background: #42B983;
            width: 33%;
            height: 100px;
            position: absolute;
            left: 0;
        }
        .center{
            background: #7E7E7E;
            /* width: 33%; */
            height: 100px;
            position: absolute;
            left: 33%;
            right: 33%;
        }
        .right{
            background: #FC4242;
            width: 33%;
            height: 100px;
            position: absolute;
            right: 0;
        }

第四种 table布局

.wrapper{
            width: 100%; 
            display: table;
        }
        .left{
            background: #42B983;
            width: 33%;
            height: 100px;
            display: table-cell;
        }
        .center{
            background: #7E7E7E;
            /* width: 33%; */
            height: 100px;
            display: table-cell;
        }
        .right{
            background: #FC4242;
            width: 33%;
            height: 100px;
            display: table-cell;
        }