CSS三列布局

方法1:左右div設置浮動，脫離標準流，中間那塊元素就會上去。

（注意：html代碼中中間部分的div必須放到左右div的後面）

<style>
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            float: left;
        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            float: right;
        }
        .boxCenter{
            min-height: 100px;
            margin-left: 220px;
            margin-right: 220px;
            background: #192;
        }
</style>
<div class="box">
    <div class="boxLeft">left</div>
    <div class="boxRight">right</div>
    <div class="boxCenter">center</div>
</div>

方法2:左右絕對定位的兩塊div元素,脫離標準流，中間那塊元素就會上去

（注意：中間部分的div必須放到左右div的後面）

<style>
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            position: absolute;
            left: 0;

        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            position: absolute;
            right: 0;

        }
        .boxCenter{
            min-height: 100px;
            margin-left: 220px;
            margin-right: 220px;
            background: #192;
        }
</style>
<div class="box">
    <div class="boxLeft">left</div>
    <div class="boxRight">right</div>
    <div class="boxCenter">center</div>
</div>

方法3:設置flex:1;能夠自適應剩餘空間

（注意：中間部分的div必須放到左右div的中間）

<style>
        .box{
            display: flex;
        }
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            position: absolute;
            left: 0;

        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            position: absolute;
            right: 0;

        }
        .boxCenter{
            min-height: 100px;
            margin: 0 220px;
            background: #192;
            flex: 1;
        }
    </style>
<div class="box">
    <div class="boxLeft">left</div>
    <div class="boxCenter">center</div>
    <div class="boxRight">right</div>
</div>

方法4:將父元素設置爲display：table，width:100%，左右子元素設置display：table-cell

<style>
        .box{
            display: table;
            width: 100%;
        }
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            display: table-cell;
        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            display: table-cell;
        }
        .boxCenter{
            min-height: 100px;
            margin: 0 20px;
            background: #192;
        }
</style>
<div class="box">
    <div class="boxLeft">left</div>
    <div class="boxCenter">center</div>
    <div class="boxRight">right</div>
</div>

方法5：中間部分浮動，設置寬度100%，充滿整個屏幕寬，內部一個div放置內容，利用margin設置留出左右兩塊的寬度

 <style>
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            float: left;
            margin-left: -100%;
        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            float: right;
            margin-left: -300px;
        }
        .boxCenter{
            min-height: 100px;
            float: left;
            width: 100%;
        }
        .center{
            min-height: 100px;
            margin-left: 220px;
            margin-right: 220px;
            background: #192;
        }
</style>
<div class="box">
    <div class="boxCenter">
        <div class="center">center</div>
    </div>
    <div class="boxLeft">left</div>

    <div class="boxRight">right</div>
</div>

文章轉自：https://blog.csdn.net/sleepwalker_1992/article/details/82802202