網頁開發中，經常會遇到左右寬度固定，中間寬度自適應的三欄布局，這裡將介紹三種常用的方法（對頁面渲染順序無要求，如要求優先渲染中間部分，移步聖杯布局和雙飛翼布局）
html結構：
="box"
>
="left"
>
<
/div>
="center"
>
<
/div>
="right"
>
<
/div>
<
/div>首先提起左右依次排列，我們可以首先想到浮動，於是統統左浮動。為了方便觀察，我們加上背景顏色
可以看到，中間部分並沒有自適應，我們可以用乙個css3新增的屬性cale。相當於乙個計算器，將左右兩側寬度減掉便是中間的寬度。
.center
這裡要注意減號前後要有空格。
缺點：calc為c3新增加的，相容不是很好。
上面方法講了用浮動，這次我們試試左右浮動，中間不浮動試試，方法二的html結構同方法一。
.left
.center
.right
這樣會導致乙個問題，左邊浮動脫離文件流勢必會導致中間部分上去，右邊浮動被迫換行。
我們可以用定位講右邊浮動移動到瀏覽器右上角，然後利用bfc的乙個特性解決中間部分和左邊部分重疊的問題。即bfc區域不會與浮動盒子發生重疊。用overflow：hidden；即可，bfc的其他觸發方式這裡就暫不贅述了。
然後現在只需要給中間區域新增宣告margin-right：300px；就可以實現了（此時右邊部分絕對定位脫離文件流，並不會被margin-right影響。）
缺點：比較麻煩，但是相容性比方法一強。
剛才的兩種方法html結構都是左中右依次排列，第三種方法換一下排列順序。
html結構：
="box"
>
="left"
>我是左邊的部分<
/div>
="right"
>我是右邊的部分<
/div>
="center"
>我是中間的部分<
/div>
<
/div>結構變成了左右中。如果我們給左邊元素左浮動，右邊元素右浮動，那麼中間自然而然的就會上去，那麼現在只要將中間區域變成bfc，頁面就會變成我們想要的三欄布局。
優點：方法簡單，容易實現；
缺點：需要改變頁面布局，變為左右中布局。
多種方法實現自適應布局
最近切了幾個手機端的網頁，第一次切的是美團的首頁，為了自適應不同的手機解析度，需要用到自適應布局，切圖的時候是用的第一中方法，用到了定位，後來查詢了一些其他方法，現在就介紹幾種自適應布局的實現方法 美團網頁頭就用到了自適應 html部分 1 div class main 2 div class di...
三欄布局 自適應
趴趴熊，我們走 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介是求職者向欲供職單位全面 簡潔 條理清晰地自我介紹 自我推薦的文書。簡介是應用寫作學研究的一種日常應用文體。p 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介...
三欄自適應布局
實現左中右三欄布局，左右為固定寬度，中間寬度隨父元素寬度變化 父元素設定display flex 左右盒子寬度固定，中間盒子設定flex 1 container left center right style class container class left div class center d...