如何實(shí)現(xiàn)左右定寬，中間自適應(yīng)寬度的css布局？對(duì)于左右定寬中間自適應(yīng)這種css布局，其實(shí)有很多實(shí)現(xiàn)方法，下面簡(jiǎn)單介紹幾種，供大家參考；絕對(duì)定位 margin原理是將左右兩邊的div使用絕對(duì)定位分別定位

如何實(shí)現(xiàn)左右定寬，中間自適應(yīng)寬度的css布局？

對(duì)于左右定寬中間自適應(yīng)這種css布局，其實(shí)有很多實(shí)現(xiàn)方法，下面簡(jiǎn)單介紹幾種，供大家參考；

絕對(duì)定位 margin

原理是將左右兩邊的div使用絕對(duì)定位分別定位到左右兩邊，中間的div使用margin屬性，留出左右div的寬度，將其中間的div寬度設(shè)為100%即可，代碼如圖

flex布局（彈性盒子）

在外層包一層div，設(shè)置屬性display：flex，里面的子元素設(shè)置屬性flex:1，具體實(shí)現(xiàn)，看下圖代碼

float（浮動(dòng)布局）

float布局將左右div分別浮動(dòng)到左右，中間使用margin屬性，留出左右的寬度，這個(gè)跟絕對(duì)定位布局有點(diǎn)相似，代碼如下圖

效果圖：
總結(jié)：

實(shí)現(xiàn)這種左右定寬，中間自適應(yīng)的css布局，其實(shí)有很多種實(shí)現(xiàn)方法，比如還有“圣杯布局”、“雙飛翼布局”；個(gè)人比較推薦flex布局方式，這也是css3新屬性，實(shí)現(xiàn)起來(lái)比較方便；如有疑問(wèn)，歡迎在評(píng)論下方留言，大家一起討論

電腦屏幕自適應(yīng)是怎么設(shè)置的？

1.首先是我們常用的bootstrap框架 https://www.runoob.com/bootstrap/bootstrap-tutorial.html

2.可以讓div設(shè)置個(gè)固定寬度 1200px 左右兩邊自適應(yīng) 里面就可以填寫(xiě)你的內(nèi)容了

如果是要寬度沾滿屏幕的話 用width：100% min-width:1200px

css能不能實(shí)現(xiàn)左邊div固定寬度，右邊div自適應(yīng)撐滿剩下的寬度？

可以實(shí)現(xiàn)，并且方法很多，

最簡(jiǎn)單的方法就是用display: table， 不過(guò)不兼容ie7及其以下瀏覽器，但是現(xiàn)在可以放棄這些瀏覽器了

display: table

<style>

html， body{ height: 100% }

.box{ display: table width: 100% }

.left， .right{ display: table-cell height: 100% }

.left{ width: 300px background: #f00 }

.right{ background:#ff0 }

</style>

<div class="box">

<div class="left">固定寬度區(qū)</div>

<div class="right">我自適應(yīng)</div>

</div>

也可以：固定寬度區(qū)使用絕對(duì)定位，自適應(yīng)區(qū)設(shè)置margin

比如.left{ position:absolute width:300px}

.right{ margin-left:300px}

還可以：float與margin配合使用

具體請(qǐng)自行嘗試吧