css 實現三欄佈局的四種方式

三欄佈局就是左中右，左右兩邊固定，中間自適應。

1. 絕對定位

    <div class="left">左邊</div>
    <div class="middle">中間</div>
    <div class="right">右邊</div>

        body {
            padding: 0;
            margin: 0;
        }

        /* 絕對定位 */
        .left, .right {
            position: absolute;
            top: 0;
        }
        .left {
            background: red;
            width: 200px;
            left: 0;
        }
        .middle {
            background: blue;
            margin: 0 200px;
        }
        .right {
            background: green;
            width: 200px;
            right: 0;
        }

2. flex

    <div class="left">左邊</div>
    <div class="middle">中間</div>
    <div class="right">右邊</div>

        body {
            display: flex;
            padding: 0;
            margin: 0;
        }
        .left {
            background: blue;
            flex: 200px 0 0;
        }
        .middle {
            background: red;
            flex: 1;
        }
        .right {
            background: green;
            flex: 0 0 200px;
        }

3. 雙飛翼

    <div class="middle">
        <div class="inner">
            中間
        </div>
    </div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>

        body {
            padding: 0;
            margin: 0;
        }
        .left, .middle, .right {
            float: left;
        }
        .left {
            background: red;
            width: 200px;
            margin-left: -100%; /* 使left移到middle的左邊 */
        }
        .right {
            background: red;
            width: 200px;
            margin-left: -200px; /* 使right移到middle的右邊 */
        }
        .middle {
            background: blue;
            width: 100%;
        }
        .inner {
            margin: 0 200px;
        }

4. 浮動

    <div class="left">左邊</div>
    <div class="right">右邊</div>
    <div class="middle">中間</div>

        .left {
            float: left;
            background: blue;
            width: 200px;
        }
        .middle {
            margin: 0 200px;
            background: red;
            width: 100%;
        }
        .right {
            float: right;
            background: green;
            width: 200px;
        }

 

參考：https://segmentfault.com/a/1190000007729716