css布局左右2边固定,中间自适应
生活随笔
收集整理的這篇文章主要介紹了
css布局左右2边固定,中间自适应
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.position+margin
原理說(shuō)明:通過(guò)絕對(duì)定位將兩個(gè)側(cè)欄固定,同樣通過(guò)外邊距給兩個(gè)側(cè)欄騰出空間,中間列自適應(yīng)。
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)題。
- 上一篇: CommonJs, AMD/Requir
- 下一篇: 如何解决两个相邻的span中间空隙