點選上方藍色字型【學習web前端】可【快速關注】

一欄固定一欄自適應

實現程式碼：

右兩欄固定，中間自適應

方法一 ：使用float浮動

自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文件流，中間元素正常在正常文件流中，使用margin指定左右外邊距對其進行一個定位。

方法二：使用絕對定位

絕對定位法原理是將左右兩邊使用absolute定位，因為絕對定位使其脫離文件流，後面的center會自然流動到他們上面，然後使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應螢幕寬度。

方法三：使用負margin（聖盃佈局）

聖盃佈局的原理是margin負值法。使用聖盃佈局首先需要在center元素外部包含一個div，包含div需要設定float屬性使其形成一個BFC，並設定寬度，並且這個寬度要和left塊的margin負值進行配合，具體原理參考這裡。這裡對聖盃佈局解釋特別詳細。

方法四：使用flex（css3新特性）

宣告 | 文章著作權歸作者所有，如有侵權，請聯絡小編刪除。

如果大家對特效或者小遊戲開發學習感興趣的話，可以加入小編學習交流QQ群（462411750），點選【閱讀原文】即可加入.每晚8點我都會在公開講座上免費為大家分享一些特效及小遊戲開發案例。帶你從零開始，學習製作特效或小遊戲。讓我們相互陪伴，共同成長！