> 在前端的面試中經(jīng)常被問到 請(qǐng)寫出一個(gè)兩邊固定中間自適應(yīng)的方法實(shí)現(xiàn)
> 廢話不多說直接上代碼
> 首先寫好默認(rèn)樣式
```javascript
? html *{
? ? ? ? padding: 0;
? ? ? ? margin: 0;
? ? ? }
? ? ? .layout article div{
? ? ? ? min-height: 100px;
? ? ? }
```
###### 利用float浮動(dòng)實(shí)現(xiàn) ######
```javascript
<!--浮動(dòng)布局? -->
? ? <section class="layout float">
? ? ? <style media="screen">
? ? ? .layout.float .left{
? ? ? ? float:left;
? ? ? ? width:300px;
? ? ? ? background: red;
? ? ? }
? ? ? .layout.float .center{
? ? ? ? background: yellow;
? ? ? }
? ? ? .layout.float .right{
? ? ? ? float:right;
? ? ? ? width:300px;
? ? ? ? background: blue;
? ? ? }
? ? ? </style>
? ? ? <h1>三欄布局</h1>
? ? ? <article class="left-right-center">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="right"></div>
? ? ? ? <div class="center">
? ? ? ? ? <h2>浮動(dòng)解決方案</h2>
? ? ? ? ? 1.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 2.這是三欄布局的浮動(dòng)解決方案烈菌；
? ? ? ? ? 3.這是三欄布局的浮動(dòng)解決方案雏婶；
? ? ? ? ? 4.這是三欄布局的浮動(dòng)解決方案搂抒；
? ? ? ? ? 5.這是三欄布局的浮動(dòng)解決方案糠聪；
? ? ? ? ? 6.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? </div>
? ? ? </article>
? ? </section>
```
###### 使用相對(duì)定位實(shí)現(xiàn) ######
```javascript
<section class="layout absolute">
? ? ? <style>
? ? ? ? .layout.absolute .left-center-right>div{
? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? .layout.absolute .left{
? ? ? ? ? left:0;
? ? ? ? ? width: 300px;
? ? ? ? ? background: red;
? ? ? ? }
? ? ? ? .layout.absolute .center{
? ? ? ? ? left: 300px;
? ? ? ? ? right: 300px;
? ? ? ? ? background: yellow;
? ? ? ? }
? ? ? ? .layout.absolute .right{
? ? ? ? ? right:0;
? ? ? ? ? width: 300px;
? ? ? ? ? background: blue;
? ? ? ? }
? ? ? </style>
? ? ? <h1>三欄布局</h1>
? ? ? <article class="left-center-right">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="center">
? ? ? ? ? <h2>絕對(duì)定位解決方案</h2>
? ? ? ? ? 1.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 2.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 3.這是三欄布局的浮動(dòng)解決方案饶套；
? ? ? ? ? 4.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 5.這是三欄布局的浮動(dòng)解決方案垒探；
? ? ? ? ? 6.這是三欄布局的浮動(dòng)解決方案妓蛮；
? ? ? ? </div>
? ? ? ? <div class="right"></div>
? ? ? </article>
? ? </section>
```
###### 利用flexbox實(shí)現(xiàn) ######
```javascript
<!-- flexbox布局 -->
? ? <section class="layout flexbox">
? ? ? <style>
? ? ? ? .layout.flexbox{
? ? ? ? ? margin-top: 110px;
? ? ? ? }
? ? ? ? .layout.flexbox .left-center-right{
? ? ? ? ? display: flex;
? ? ? ? }
? ? ? ? .layout.flexbox .left{
? ? ? ? ? width: 300px;
? ? ? ? ? background: red;
? ? ? ? }
? ? ? ? .layout.flexbox .center{
? ? ? ? ? flex:1;
? ? ? ? ? background: yellow;
? ? ? ? }
? ? ? ? .layout.flexbox .right{
? ? ? ? ? width: 300px;
? ? ? ? ? background: blue;
? ? ? ? }
? ? ? </style>
? ? ? <h1>三欄布局</h1>
? ? ? <article class="left-center-right">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="center">
? ? ? ? ? <h2>flexbox解決方案</h2>
? ? ? ? ? 1.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 2.這是三欄布局的浮動(dòng)解決方案圾叼；
? ? ? ? ? 3.這是三欄布局的浮動(dòng)解決方案蛤克；
? ? ? ? ? 4.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 5.這是三欄布局的浮動(dòng)解決方案夷蚊；
? ? ? ? ? 6.這是三欄布局的浮動(dòng)解決方案构挤；
? ? ? ? </div>
? ? ? ? <div class="right"></div>
? ? ? </article>
? ? </section>
```
###### 利用display:table實(shí)現(xiàn) #####
```javascript
<!-- 表格布局 -->
? ? <section class="layout table">
? ? ? <style>
? ? ? ? .layout.table .left-center-right{
? ? ? ? ? width:100%;
? ? ? ? ? height: 100px;
? ? ? ? ? display: table;
? ? ? ? }
? ? ? ? .layout.table .left-center-right>div{
? ? ? ? ? display: table-cell;
? ? ? ? }
? ? ? ? .layout.table .left{
? ? ? ? ? width: 300px;
? ? ? ? ? background: red;
? ? ? ? }
? ? ? ? .layout.table .center{
? ? ? ? ? background: yellow;
? ? ? ? }
? ? ? ? .layout.table .right{
? ? ? ? ? width: 300px;
? ? ? ? ? background: blue;
? ? ? ? }
? ? ? </style>
? ? ? <h1>三欄布局</h1>
? ? ? <article class="left-center-right">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="center">
? ? ? ? ? <h2>表格布局解決方案</h2>
? ? ? ? ? 1.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 2.這是三欄布局的浮動(dòng)解決方案惕鼓；
? ? ? ? ? 3.這是三欄布局的浮動(dòng)解決方案筋现；
? ? ? ? ? 4.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 5.這是三欄布局的浮動(dòng)解決方案箱歧；
? ? ? ? ? 6.這是三欄布局的浮動(dòng)解決方案矾飞；
? ? ? ? </div>
? ? ? ? <div class="right"></div>
? ? ? </article>
? ? </section>
```
###### 利用css3 display:grid實(shí)現(xiàn)(網(wǎng)格布局) #####
```javascript
<!-- 網(wǎng)格布局 -->
? ? <section class="layout grid">
? ? ? <style>
? ? ? ? .layout.grid .left-center-right{
? ? ? ? ? width:100%;
? ? ? ? ? display: grid;
? ? ? ? ? grid-template-rows: 100px;
? ? ? ? ? grid-template-columns: 300px auto 300px;
? ? ? ? }
? ? ? ? .layout.grid .left-center-right>div{
? ? ? ? }
? ? ? ? .layout.grid .left{
? ? ? ? ? width: 300px;
? ? ? ? ? background: red;
? ? ? ? }
? ? ? ? .layout.grid .center{
? ? ? ? ? background: yellow;
? ? ? ? }
? ? ? ? .layout.grid .right{
? ? ? ? ? background: blue;
? ? ? ? }
? ? ? </style>
? ? ? <h1>三欄布局</h1>
? ? ? <article class="left-center-right">
? ? ? ? <div class="left"></div>
? ? ? ? <div class="center">
? ? ? ? ? <h2>網(wǎng)格布局解決方案</h2>
? ? ? ? ? 1.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 2.這是三欄布局的浮動(dòng)解決方案呀邢；
? ? ? ? ? 3.這是三欄布局的浮動(dòng)解決方案洒沦；
? ? ? ? ? 4.這是三欄布局的浮動(dòng)解決方案；
? ? ? ? ? 5.這是三欄布局的浮動(dòng)解決方案价淌；
? ? ? ? ? 6.這是三欄布局的浮動(dòng)解決方案申眼；
? ? ? ? </div>
? ? ? ? <div class="right"></div>
? ? ? </article>
? ? </section>
```
* 以上是我所了解接觸到的最常見的方法及實(shí)現(xiàn)有其他方案可以在評(píng)論區(qū)提供哦
