CSS左右寬度自適應(yīng)，中間定寬？Aoao有關(guān)更多代碼，請(qǐng)?jiān)L問(wèn)：lazy Gallery中間列以固定寬度居中，左右列的寬度相等，同時(shí)寬度是自適應(yīng)的。使用margin的負(fù)值來(lái)錯(cuò)開(kāi)固定寬度，因?yàn)樗枰殖蓛?/p>

CSS左右寬度自適應(yīng)，中間定寬？

Aoao

有關(guān)更多代碼，請(qǐng)?jiān)L問(wèn)：lazy Gallery

中間列以固定寬度居中，左右列的寬度相等，同時(shí)寬度是自適應(yīng)的。

使用margin的負(fù)值來(lái)錯(cuò)開(kāi)固定寬度，因?yàn)樗枰殖蓛蛇叄灾恍鑼⒐潭▽挾儒e(cuò)開(kāi)在中間

ie不擅長(zhǎng)計(jì)算寬度乘以百分比，所以必須犧牲一兩個(gè)PX顯示，而IE6沒(méi)有最小寬度。

。

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

事實(shí)上，有很多方法可以實(shí)現(xiàn)CSS左右定寬布局和中間自適應(yīng)。下面是一個(gè)簡(jiǎn)單的介紹供您參考；

其原理是使用絕對(duì)定位來(lái)分別定位左右兩側(cè)的div。中間div使用margin屬性保留左、右div的寬度，并將中間div的寬度設(shè)置為100%。代碼如圖所示

在外層包裝一層div，設(shè)置屬性display:flex，其中的子元素設(shè)置屬性display:flex彈性：1，請(qǐng)參見(jiàn)下圖中的代碼

float layout將左div和右div分別浮動(dòng)到左側(cè)和右側(cè)，并使用中間的margin屬性保留左右兩側(cè)的寬度。這和絕對(duì)定位布局有點(diǎn)類似，代碼如下圖所示

]2。你可以為div設(shè)置一個(gè)固定的寬度1200px，左右兩邊都是自適應(yīng)的，你可以填充你的內(nèi)容

如果你想讓寬度充滿整個(gè)屏幕，請(qǐng)使用width:100%min-寬度：1200px

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

它可以通過(guò)多種方式實(shí)現(xiàn)，

最簡(jiǎn)單的方法是使用display:table，但它與IE7及以下版本不兼容瀏覽器，但現(xiàn)在我們可以放棄這些瀏覽器

<style>

HTML，body{height:100%}

.Box{Display:table width:100%}。左，。右{顯示：表格單元格高度：100%}。左{寬度：300px背景：#F00}。右{背景：#ff0}

</style>

<div class=“box”>

<div class=“l(fā)eft”>固定寬度區(qū)域</div>

<div class=“Right”>我是自適應(yīng)的</div>

</div>

，例如。左{位置：絕對(duì)寬度：300px}

。右{邊距-左：300px}

請(qǐng)自己試試