1.position+margin
原理說明：通過絕對定位將兩個側欄固定，同樣通過外邊距給兩個側欄騰出空間，中間列自適應。

<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>

布局步驟:

• 三者都設置向左浮動。
• 設置main寬度為100%，設置兩側欄的寬度。
• 設置 負邊距，left設置負左邊距為100%，right設置負左邊距為負的自身寬度。
• 設置main的padding值給左右兩個子面板留出空間。
• 設置兩個子面板為相對定位，left的left值為負的left寬度，right的right值為負的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>

布局步驟:

• 三者都設置向左浮動。
• 設置main-wrap寬度為100%，設置兩個側欄的寬度。
• 設置 負邊距，sub設置負左邊距為100%，extra設置負左邊距為負的自身寬度。
• 設置main的margin值給左右兩個子面板留出空間。

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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。