中間自適應佈局的5種解法

時間 2019-11-08

標籤中間自適應佈局解法欄目 CSS 简体版

原文原文鏈接

前言

在作頁面時，咱們每每會碰到頁面佈局相關的內容，面試時也常常會被問到，那麼今天我就來總結一下關於頁面佈局的內容。

問題：如何實現三欄佈局（高度固定，左中右的結構）

假設高度已知，請寫出三欄佈局，其中左右寬度均爲300px，中間自適應。面試

看了上面的題目，有經驗的人也許會以爲很簡單，仔細想一想，若是咱們來寫，能寫出幾種方案呢？通常都會想到兩種吧，float和position定位，其實除了這兩種外，還有3種能夠寫，下面我就來一一介紹一下：瀏覽器

方案一（float浮動）

<section class='layout float'>
         <style>
             .layout.float .left-right-center{
                 height: 100px;
             }
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: red;
             }

             .layout.float .right{
                 float: right;
                 width: 300px;
                 background-color: blue;
             }

             .layout.float .center{
                 background-color: yellow;
             }
         </style>
         <article class="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">我是中間的自適應元素--浮動</div>
         </article>
     </section>

原理：左右兩個div因爲浮動脫離了文檔流，center就會上移，形成三欄佈局的效果（前提是高度相同）
優勢：兼容性高
缺點：須要清除浮動來防止影響其餘元素
若是高度不固定，中間的內容會被撐開，左右兩邊不會一塊兒撐開

方案二（絕對定位）

<section class="layout absolute">
         <style>
             .layout.absolute .left-center-right div{
                 position: absolute;
                 height: 100px;
             }

             .layout.absolute .left{
                 left: 0;
                 width: 300px;
                 background-color: red;
             }

             .layout.absolute .center{
                 left: 300px;
                 right: 300px;
                 background-color: yellow;
             }

             .layout.absolute .right{
                 right: 0;
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中間的自適應元素--絕對定位
            </div>
            <div class="right"></div>
         </article>
     </section>

原理：利用絕對定位以及寬度，將左右兩邊的div固定住，中間div的寬度就會有自適應的效果
優勢：快捷
缺點：若是父元素脫離了文檔流，子元素必定會脫離文檔流，運用的場景很少
若是中間元素的高度增長，兩邊元素的高度不會增長，因此只有中間的div會撐開

方案三（flex佈局）

<section class="layout flex">
         <style>
             .layout.flex .left-center-right{
                 display: flex;
                 height: 100px;
             }

             .layout.flex .left{
                 width: 300px;
                 background-color: red;
             }

             .layout.flex .center{
                 flex: 1;
                 background-color: yellow;
             }

             .layout.flex .right{
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中間的自適應元素--flex佈局
            </div>
            <div class="right"></div>
         </article>
     </section>

原理：將父元素設置爲flex佈局，而後中間元素設置flex爲1，達到自適應的效果
優勢：在實際開發中經常使用
缺點：IE8及如下的瀏覽器不支持
若是高度不固定，中間內容的高度撐開後，兩邊也會隨之撐開

方案四（table佈局）

<section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 100px;
                width: 100%;
            }

            .layout.table .left{
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout.table .center{
                display: table-cell;
                background-color: yellow;
            }

            .layout.table .right{
                display: table-cell;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中間的自適應元素--table
            </div>
            <div class="right"></div>
        </article>
    </section>

原理：將父元素設置爲table佈局，而後每一個子元素都是teble-cell，給左右兩個格子設置固定的寬度，中間的格子就能夠達到自適應的效果
優勢：兼容性好，可作flex佈局在ie8如下的代替
缺點：侷限性
若是高度不固定，中間被撐開時，左右兩邊也會被撐開，和flex相似

方案五（網格佈局）

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;/*每一格都是100px高*/
                grid-template-columns: 300px auto 300px;/*左右兩格都是300px，中間是自適應*/
            }
            
            .layout.grid .left{
                background-color: red;
            }

            .layout.grid .center{
                background-color: yellow;
            }

            .layout.grid .right{
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中間的自適應元素--grid佈局
            </div>
            <div class="right"></div>
        </article>
    </section>