三欄式布局是工作中常用的布局方式，三欄式布局有多種寫法，作為前端開發，對布局的了解也是一項基本功，
下面是整理的五種三欄式布局的基本寫法
公共樣式
//清除預設樣式html *//layout公共樣式
.layout.layout div
1. 浮動布局（浮動會是文件脫離文件流，需要清浮動）
這是中間部分
2. 絕對定位布局（絕對定位也會脫離文件流）
這是中間部分
3. flex布局（css3的新語法，pc相容性問題，常用於移動端，中間被內容撐開高度時，左右兩邊的高度也能同中間保持一致）
這是中間部分
4. **布局（中間被內容撐開高度時，左右兩邊的高度也能同中間保持一致）
這是中間部分
5.網格布局（新語法，**量少）
這是中間部分
三欄布局 左右固定，中間自適應
之前有寫過關於固定父布局，然後父布局內有是兩列自適應。現在我們來看看三欄布局，當左右固定，中間的布適應是如何實現的。這裡將介紹兩種方法，一種是使用margin值，另一種是使用position絕對定位。首先我們來看第一種方法，下面是實現的 無標題文件left right 1.請補充右側編輯器的任務1，...
三欄布局 左右固定，中間自適應
這是我綜合的幾種方法，親自實踐過了。第五種是三個都是自適應。charset utf 8 三欄布局title type text css 第一種方法 bfc left right main 第二種方法 雙飛翼布局 container main left right 第三種方法 聖杯布局 contain...
左右固定中間自適應布局
1.這是三欄布局中間部分 2.這是三欄布局中間部分 1.這是三欄布局中間部分 2.這是三欄布局中間部分 其實稍微想一下就能想到這個flex布局，article的display設定為flex，左右div寬度固定，中間div的flex屬性設定為1，讓其自動填充剩下的空間 1.這是三欄布局中間部分 2.這...