关于三列布局中间列或侧边列的自适应问题

三列布局最常有圣杯局，用来两侧固定，中间列优先载入且自适应窗口。

圣杯布局：

html:

<div class="main">
        <div class="main-left">
            left
        </div>
        <div class="main-right">
            right
        </div>
        <div class="main-center">
            center
        </div>
    </div>

css:

body {
            margin: 0;
            padding: 0 5px;
        }


        .main {
            background-color: black;
            padding: 0 450px;
            height: 700px;
        }


        .main-left {
            width: 450px;
            height: 700px;
            background-color: blue;
            float: left;
            margin-left: -450px;
        }


        .main-center {
            background-color: #ebe8dd;
            height: 700px;
        }


        .main-right {
            width: 450px;
            height: 700px;
            background-color: red;
            float: right;
            margin-right: -450px;
        }

除此之外，有时在同一页面绘制多图表时，会有单侧自适应的情况，用浮动布局即可。

浮动布局（左侧 中间 固定，右侧自适应）：

html

<div class="main">
        <div class="main-left">
            left
        </div>
        <div class="main-center">
            center
        </div>
        <div class="main-right">
            right
        </div>
    </div>

css:

body {
            margin: 0;
            padding: 0 5px;
        }

        .main {
            background-color: black;
            height: 700px;
        }
        
        .main-left {
            width: 425px;
            height: 700px;
            background-color: blue;
            float: left;
        }

        .main-center {
            width: 425px;
            height: 700px;
            background-color: #ebe8dd;
            padding-left:20px;
            float: left;
        }

        .main-right {
            background-color: red;
            height: 700px;
            margin-left: 870px;
        }

若要左侧自适应，使中间列和右边列就向右侧浮动即可。margin-left(right)===另外两列width之和。