面試CSS 兩側固定寬度，中間自適應的三列布局

1. 聖杯布局  （聖杯布局的的原理是利用margin的負值的特性來實現的。）   

注：布局中間部分一定要放在前面，左右順序不限制。對於left塊的margin負值一定要等於wrap的寬度。

主要步驟如下：

在center塊外層新增乙個div，並設定左浮，以及寬度（這個寬度要與left塊的margin-left相匹配），

center塊設定左右的margin，margin-left要與left塊的寬度相等，margin-right要與right塊的寬度相等。

left塊設定左浮，並且其margin-left設定成負值，這個負值與center塊外層的div的寬度相等，這樣，left塊就移動到center的左側了。

right塊設定左浮，並且其margin-left設定成負值，這個負值與自身寬度相等，這樣，right塊就移動到center的右側了。*/

center

left
right

1.設定 conter

margin: 0 200px;    /*關鍵步驟：在#center的左右兩側空出#left_margin和#right_margin的寬度來*/

2.設定left,right

margin-left: -100%; /*關鍵步驟：能夠讓#left_margin塊從第二行移動到左側*/
margin-left: -200px; /*關鍵步驟：能夠讓#right_margin塊從第二行移動到右側*/
2.flex布局
在外圍包裹一層div，設定為display：flex；

center塊設定flex：1，不設定寬度，
left和right塊設定固定的寬度。

3.絕對定位的方法

這種方法，其實原理很簡單。

就是將左右兩側使用絕對定位，這樣二者脫離了文件流，
中間的部分則設定margin就好了。

4.浮動的方法 

浮動法的原理其實跟絕對定位相似的，就是使用對左右使用分別使用float:left和float:right， 從而使左右兩個元素脫離文件流，中間元素正常在正常文件流中，使用margin指定左右外邊距對其進行乙個定位。 需要注意的是：center塊要寫在左右兩側的後面，不然，不在一行。

 
CSS3學習筆記 中間自適應 兩側寬度固定
實現三欄自適應布局 左右寬度固定，中間自適應 1.傳統的position和margin屬性進行布局 1 絕對定位法 原理 將左右兩邊使用absolute定位，因為絕對定位使其脫離文件流，後面的center會自然流動到他們上面，然後使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應螢幕寬...
css中間固定寬度，兩邊自適應寬度
html5 css main1 left1,right1 left1 inner,right1 inner 借助於負的margin來實現的，首先我們在中間列定好固定值，因為此值是不會在改變的，接著對其進行左浮動 那麼關鍵地主是在左右邊欄設定地方，這種方法是將其都進行50 的寬度設定，並加上中負的左邊...
CSS三欄布局 中間固定兩邊自適應寬度
w3cplus 今天早上在阿當大俠的編寫高質量前端 群中與幾位朋友一起 和學習了一種用div css進行的三列 三欄 布局，而且是中間固定左右兩邊自適應寬度，聽起來蠻有意思的。因為以前只是碰到過，左右兩列固定而中間自適應的運用。於是思考一下馬上敲起了鍵盤自己實戰了一下，接著與大家一起測試，還是通過了...