css中間自適應布局的5種解法詳解

2024-07-11 08:59:49

字體：大中小

來源：轉載

供稿：網友

前言

在做頁面時，我們往往會碰到頁面布局相關的內容，面試時也經常會被問到，那么今天我就來總結一下關于頁面布局的內容。

問題：如何實現(xiàn)三欄布局（高度固定，左中右的結構）

假設高度已知，請寫出三欄布局，其中左右寬度均為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就會上移，造成三欄布局的效果（前提是高度相同）
優(yōu)點：兼容性高
缺點：需要清除浮動來防止影響其他元素
如果高度不固定，中間的內容會被撐開，左右兩邊不會一起撐開

方案二（絕對定位）

<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的寬度就會有自適應的效果
優(yōu)點：快捷
缺點：如果父元素脫離了文檔流，子元素一定會脫離文檔流，運用的場景不多
如果中間元素的高度增加，兩邊元素的高度不會增加，所以只有中間的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，達到自適應的效果
優(yōu)點：在實際開發(fā)中常用
缺點：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，給左右兩個格子設置固定的寬度，中間的格子就可以達到自適應的效果
優(yōu)點：兼容性好，可做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>