圣杯规划、双飞翼规划,本质上都是三栏规划──中心自适应双方牢固宽。有一次口试，请求写出三种完成体式格局，效果只写出了两种，口试官说基本还不够踏实~呜

圣杯规划

圣杯HTML构造：

<div class='main'>
    <div class="middle">中心的</div>
    <div class="left">左侧的</div>
    <div class="right">右侧的</div>
</div>

双飞翼规划

双飞翼HTML构造为：

<div class='main'>
    <div class="middle">
        <div class="inner_middle">中心的</div>
    </div>
    <div class="left">左侧的</div>
    <div class="right">右侧的</div>
</div>

一、float+margin

<style type="text/css">
    .main{
        overflow: hidden;
        background: #eee;
    }
    .left{
        background: red;
        width: 200px;
        height: 280px;
        float: left;
    }    
    .right{
        background: blue;
        width: 200px;
        height: 290px;
        float: right;
    }
    .middle{
        background: green;
        height: 300px;
        margin-left: 200px;
        margin-right: 200px;
    }
</style>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>        
    </div>

申明：网上还有人用padding替代margin的要领，感兴趣的本身去查。

二、Position

<style type="text/css">
    .main{
        position: relative;
    }
    .left{
        background: red;
        height: 300px;
        width: 200px;
        position: absolute;
        left: 0;
        top: 0;
    }    
    .right{
        background: blue;
        height: 300px;
        width: 200px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .middle{
        background: green;
        height: 300px;
        width: 100%;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="center"></div>
        <div class="middle"></div>
    </div>

申明：网上有人提到这个要领在某些情况下会涌现bug，详细没有深切相识过。

三、Flex

<style type="text/css">
    .main{
        display: flex;
        align-items: center;
    }
    .left{
        background: red;
        width: 200px;
        height: 300px;
    }    
    .right{
        background: blue;
        width: 200px;
        height: 300px;
    }
    .middle{
        background: green;
        height: 300px;
        width: 100%;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="middle"></div>
        <div class="right"></div>
    </div>

申明：低版本的浏览器有兼容的题目，在网上也看到有人用order掌握位置

四、Grid

<style type="text/css">
    .main{
        display: grid;
        height: 300px;
    }
    .left{
        background: red;
        grid-row:1;
        grid-column:1/2;
    }    
    .right{
        background: blue;
        grid-row:1;
        grid-column:4/5;
    }
    .middle{
        background: green;
        grid-row:1;
        grid-column:2/4;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="middle"></div>
        <div class="right"></div>
    </div>

申明：grid-column一共分为5个格，“grid-column:1/2”占了第一个和第二个格，不是指占了二分之一。这个要领兼容性有比较大的题目，网上有不少文章提到浏览器还没有供应支撑，实际上新版主流浏览器已支撑了。