這篇文章主要聊一聊布局這件大事。只要開始步入前端的大門，布局這件事就是逃避不了的，這也是前端開發人員必修的內功。
所以接下來這篇文章我們主要講一講聖杯布局和雙飛翼布局。
當然如果你已經非常了解這兩個布局的話，可以選擇忽略以下內容。
總的來說，這兩個布局都是基於同乙個想法就是左右側欄寬度固定，中間內容欄實現寬度自適應，但是這兩個布局的實現方式又是有所不一樣的。
注意順序
注意：.container應該設定最大寬度是100%，如果設定為寬度100%，則會因為新增內邊距的原因，導致容器的寬度大於瀏覽器的寬度。
當前實現效果：
接下來，實現聖杯布局的核心做法：
使用浮動使元素脫離文件，然後利用margin使left塊固定到middle的左邊，right塊固定到middle的右邊，然後利用相對定位將左右塊移動到自己的位置，這樣聖杯布局就完成了，具體的實現**請看下圖：
ps：利用margin-left:-100%將left塊拉到左邊，margin-left:-220px將right塊拉到右邊效果圖：
這樣就實現了聖杯布局。
當然也可以利用box-sizing:border-box實現聖杯布局：
修改當前的**：
這樣也可以實現上述聖杯布局的效果。
雙飛翼與聖杯布局最大的區別在於雙飛翼主要利用的外邊距實現的。
調整當前網頁布局結構：
在middle塊中新增了middle-body
刪除了.containert的內邊距，寬度設定為100%;
當前效果：
我們可以從中看到，「我是middle」這幾個字被左邊的塊擋住了，
接下來我們利用margin使「我是middle」這幾個字出現
此時效果圖
這樣，雙飛翼布就完成了。
如果你也喜歡前端，那就點個關注吧，嘻嘻嘻。
右邊自適應 左右布局 css左右自適應布局
如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...
左右布局 左邊定寬 右邊自適應
要求 不少於三種方法 所有方案 父元素的寬度為單位為 absolute padding left right 小結 父元素設定padding left是給左邊元素預留空間，左邊元素絕對定位到該位置。flex，未來趨勢，推薦 left right 小結 flow屬性為flow grow,flow sh...
CSS布局樣式 左右布局，左邊定寬，右邊自適應
1.display table width 100 和 diplay table cell tabletitle head wrap sidebar content style id wrap class sidebar sidebardiv class content contentdiv div...