兩欄布局（兩列自適應、一列固定一列自適應）、三欄布局（兩邊固定中間自適應）
1、兩列自適應
兩列自適應是特別簡單的布局方式，其要點在於把列寬用百分百來表示，然後可以使用 float 或 display：inline-block 等方法來讓兩列處於同一行
方法一：使用 float
"outer">
"left">列一
"right">列二
缺點：兩列都脫離了文件流，兩列後面的內容或父盒子無法被撐起（上圖中的綠色是父盒子），故需要清除浮動。
方法二：使用 display：inline-block
"outer">
"left">列一
//這兒換行了，"列一" 和 "列二" 之間因換行形成了乙個間隙
"right">列二
缺點：需要考慮盒子的間距。
方法一：margin
"left">列一
"outer">
"right">列二
方法二：bfc
"left">列一
"right">列二
1、兩邊固定中間自適應
方法一：margin
"outer">
"center">列二
"left">列一
"right">列三
要點：注意三者在 html 中的順序。
方法二：position
"left">列一
"center">列二
"right">列三
方法三：bfc
"left">列一
"right">列三
"center">列二
CSS實現 兩欄布局，三欄布局
aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...
兩欄布局和三欄布局的實現
左側固定，右側自適應，不給右側設定固定寬度即可 1 class wrap 2class left 3左側固定內容45 class right 6右側內容自適應78 3左側固定內容45 class right 6右側內容自適應78 3左側固定內容45 class right 6右側內容自適應78 3左...
三欄布局與兩欄布局
html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...