主體部分

<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;
        }