四種方法實現──三欄佈局（聖盃佈局、雙飛翼佈局）

聖盃佈局、雙飛翼佈局,本質上都是三欄佈局──中間自適應兩邊固定寬。有一次面試，要求寫出三種實現方式，結果只寫出了兩種，面試官說基礎還不夠紮實~嗚

聖盃佈局

聖盃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>

1、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的方法，感興趣的本身去查。

2、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，具體沒有深刻了解過。

3、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控制位置

4、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」佔了第一個和第二個格，不是指佔了二分之一。這個方法兼容性有比較大的問題，網上有很多文章提到瀏覽器尚未提供支持，實際上新版主流瀏覽器已經支持了。