双飞翼布局

        <!-- 双飞翼布局 -->
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .container {
                width: 100%;
            }
            .column {
                float: left;
                height: 100vh;
            }
            .left {
                width: 300px;
                background-color: #f00;
                /* 这个是覆盖上边center的宽度，所以用100% */
                margin-left: -100%;
            }
            .center {
                width: 100%;
                background-color: #0f0;
            }
            .right {
                width: 300px;
                background-color: #00f;
                /* 这个是要覆盖上边一个 .right本身的宽度，所以用-300px */
                margin-left: -300px;
            }
        </style>
        <div class="contaner">
            <div class="column center">center</div>
            <div class="column left">left</div>

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