1.position+margin
原理說(shuō)明：通過(guò)絕對(duì)定位將兩個(gè)側(cè)欄固定，同樣通過(guò)外邊距給兩個(gè)側(cè)欄騰出空間，中間列自適應(yīng)。

<style>.left, .right {position: absolute;top: 0;width: 200px;height:40px;background: red;}.left {left: 0;}.right {right: 0;}.main {margin: 0 200px;height:40px;background: #000;} </style> <div id="bd"><div class="main"></div><div class="left"></div><div class="right"></div> </div>

2.float+margin

<style>.left,.right{height:40px;background: yellow;}.left {width: 100px;float: left;}.right {width: 200px;float: right;}.main {margin-left: 100px;margin-right: 200px;height:40px;background: #000;}</style> <div id="bd"><div class="left"></div><div class="right"></div><div class="main"></div> </div>

3.圣杯布局（float+margin+padding+position:relative）

<style>#bd {padding: 0 230px 0 190px;height:40px;width:100%;box-sizing: border-box;}.main {float: left;width: 100%;height:40px;background: #000;}.left {float: left;width: 190px;margin-left: -100%;position: relative;left: -190px;height:40px;background: red;}.right {float: left;width: 230px;margin-left: -230px;position: relative;right: -230px;height:40px;background: yellow;}</style> <div id="bd"><div class="main"></div><div class="left"></div><div class="right"></div> </div>

布局步驟:

• 三者都設(shè)置向左浮動(dòng)。
• 設(shè)置main寬度為100%，設(shè)置兩側(cè)欄的寬度。
• 設(shè)置 負(fù)邊距，left設(shè)置負(fù)左邊距為100%，right設(shè)置負(fù)左邊距為負(fù)的自身寬度。
• 設(shè)置main的padding值給左右兩個(gè)子面板留出空間。
• 設(shè)置兩個(gè)子面板為相對(duì)定位，left的left值為負(fù)的left寬度，right的right值為負(fù)的left寬度。

4.雙飛翼布局（float+margin）

<style>#main-wrap {float: left;width: 100%;background: #000;}#main {margin: 0 230px 0 190px;}.sub {float: left;width: 190px;margin-left: -100%;background: yellow;}.extra {float: left;width: 230px;margin-left: -230px;background: red;}</style> <div id="main-wrap" class="column"><div id="main">#main</div> </div> <div class="sub">left</div> <div class="extra">right</div>

布局步驟:

• 三者都設(shè)置向左浮動(dòng)。
• 設(shè)置main-wrap寬度為100%，設(shè)置兩個(gè)側(cè)欄的寬度。
• 設(shè)置 負(fù)邊距，sub設(shè)置負(fù)左邊距為100%，extra設(shè)置負(fù)左邊距為負(fù)的自身寬度。
• 設(shè)置main的margin值給左右兩個(gè)子面板留出空間。

5.flex

<style>#bd{display: flex}.left,.right{height:40px;background: yellow;}.left {width: 100px;}.right {width: 200px;}.main {height:40px;background: #000;flex:1;}</style> <div id="bd"><div class="left"></div><div class="main"></div><div class="right"></div> </div>

總結(jié)

以上是生活随笔為你收集整理的css布局左右2边固定，中间自适应的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。