頁面佈局（三欄佈局）

題目： 假設高度已知，左右寬度各位300px,中間自適應

　　方案一： 浮動解決方案

　　　 優勢：瀏覽器兼容性比較好

　　　　缺點：須要清除浮動（脫離了文檔流）

　　　　代碼以下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        float: left;
        width: 300px;
        background-color: red;
    }
    .right{
        float: right;
        width: 300px;
        background-color: green;
    }
    .center{
        min-height: 100px;
        margin: 0 300px;
        background-color: yellow;
    }
</style>
<!--浮動佈局-->
<section class="layout">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        <h2>float佈局方案</h2>
        1.float佈局 中間內容
        2.float佈局 中間內容
    </div>
</section>

　　方案二： 絕對定位解決方案

 

　　　　優勢：瀏覽器兼容性好

 

　　　　缺點：脫離了文檔流，可以使用性差

 

　　代碼以下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout>div{
        position: absolute;
        min-height: 100px;
    }
    .left{
        left: 0;
        width: 300px;
        background-color: red;
    }
    .right{
        right: 0;
        width: 300px;
        background-color: green;
    }
    .center{
       left: 300px;
        right: 300px;
        background-color: yellow;
    }
</style>
<!--絕對定位佈局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>絕對定位解決方案</h2>
        1.絕對定位佈局 中間內容
        2.絕對定位佈局 中間內容
    </div>
    <div class="right"></div>
</section>

　　方案三：flexbox解決方案（優先選擇的方案）

 

　　　　優勢：css3 爲了解決上面兩種方案的不足出現的，移動端都用flex佈局

　　　　缺點：一些瀏覽器還不支持

 

　　代碼以下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display: -webkit-flex;
        display: flex;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        width: 300px;
        background-color: red;
    }
    .right{
        width: 300px;
        background-color: green;
    }
    .center{
        -webkit-flex:1;
        flex: 1;
        background-color: yellow;
    }
</style>
<!--flexbox佈局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>flexbox解決方案</h2>
        1.flexbox佈局 中間內容
        2.flexbox佈局 中間內容
    </div>
    <div class="right"></div>
</section>

　　方案四：表格佈局方案

　　　　優勢： 瀏覽器的兼容性比較好

　　　　 代碼以下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display:table;
        width: 100%;
        min-height: 100px;
    }
    .layout>div{
        display: table-cell;
    }
    .left{
        width: 300px;
        background-color: red;
    }
    .right{
        width: 300px;
        background-color: green;
    }
    .center{
        background-color: yellow;
    }
</style>
<!--表格佈局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>table解決方案</h2>
        1.表格佈局 中間內容
        2.表格佈局 中間內容
    </div>
    <div class="right"></div>
</section>

　　方案五：網格佈局（grid）

　　　　優勢：網格佈局是新出的屬性，是一個新的技術。能夠經過很簡單的代碼就可實現複雜的佈局

　　　　缺點：只有一些主瀏覽器支持

　　　　代碼以下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display:grid;
        grid-template-columns: 300px auto 300px;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        background-color: red;
    }
    .right{
        background-color: green;
    }
    .center{
        background-color: yellow;
    }
</style>
<!--網格佈局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>網格佈局解決方案</h2>
        1.網格佈局 中間內容
        2.網格佈局 中間內容
    </div>
    <div class="right"></div>
</section>

這個題目中的高度是已知的，若是高度不固定，隨着內容的增多而增長時。前兩個方案就不能夠了。後三個方案還是能夠的