實現乙個左右布局，左邊固定寬度200px，右邊實現寬度自適應的兩列布局下面分享下我的幾種做法以及解釋
首先我們先通用的布局樣式：
>
class
="fixed"
>
固定200pxdiv
>
class
="auto"
>
自動充滿div
>
div>
來個預設樣式：
.fixed
.auto
>
class
="fixed l1"
>
固定200pxdiv
>
class
="auto r1"
>
自動充滿div
>
div>
.l1.r1
由於 左邊l1 浮動，脫離了正常流的規則，右邊r1是個塊級元素，所以會「無視」左側的浮動，直接向父級的左側靠攏，然後我們再加個padding-left: 200px;把內容推出來即可
效果圖（包括以下幾種方法的效果都是這樣）：
固定200pxdiv
>
class
="auto r2"
>
自動充滿div
>
div>
.con-2
.l2.r2
（給父盒子新增乙個類名con-2）
首先，設定兩個盒子為行塊，這樣就讓他們處於同一行；為了解決中間產生空隙的問題，設定父盒子的字型大小為0，（空隙是**換行引起的）；然後我們讓右邊寬度100%，同時利用margin-left為 -200px強行蹭到左側去，再用padding-left: 200px;把內容推出來，當然別忘了box-sizing: border-box;。
這時基本就實現了，但是你會發現乙個問題，右側的把左側覆蓋了？！，所以得想辦法讓左側的層級高於右側，肯定有很多人首先想到z-index，但是很可惜，兩個都是正常流中的元素，z-index並不起效果。最簡單的辦法就是讓左側position: relative;，（ 新增了position屬性且值不為static的元素比相鄰沒有position屬性的元素層級要高 ），這就大功告成了
class
="con-3"
>
class
="fixed l3"
>
固定200pxdiv
>
class
="auto r3"
>
自動充滿div
>
div>
.con-3
.l3.r3
con-3）
利用position定位，這個應該不難理解，給左側 l3新增position: relative; z-index: 1;是因為避免被右側覆蓋了（兩個同樣設定了position，當左側z-index>= 1時，該層級比沒有設定z-index的要高）
class
="con-4"
>
class
="fixed l4"
>
固定200pxdiv
>
class
="auto r4"
>
自動充滿div
>
div>
.con-4
.l4.r4
con-4）
利用 flex 應該是最爽最簡單的了！我們知道當父盒子寬度不夠分時，flex會自動壓縮子盒子們，而左側的flex-shrink: 0;表示我不參與壓縮，一直是200px
>
class
="fixed l5"
>
固定200pxdiv
>
class
="auto r5"
>
自動充滿div
>
div>
.l5.r5
overflow: hidden;使之變成乙個bfc，所以不會和左側的浮動發生重疊，盒子預設就是撐滿螢幕，所以不用手動設定寬度。
還不了解bfc的可以看我另外一邊文章：bfc
文中如有錯還請大神指出~謝哈
經典布局題 左邊固定右邊自適應的幾種做法
parent left 我是左邊固定 div right 我是右邊自適應 div div 1 左邊向左浮動並固定寬度，右邊給margin left 注 右邊這個div一定不能給width 100 parent left right2 父元素相對定位，左邊絕對定位並給固定寬度，右邊margin lef...
css左邊固定，右邊自適應
lang en charset utf 8 title head class container class left div class right div div body html 方法1 左邊div使用float left left right style 方法2 將外部容器div設定dis...
css 布局小技巧 左邊固定右邊自適應
在頁面布局或者是列表布局中，我們經常出現乙個場景 左邊是固定寬度的盒子，右邊自適應 divclass product open labelclass label open product label 這一列是固定寬度 ulclass check game 這一列自適應 li label inputt...