傳統三列布局：左右定寬，中間自適應
1.絕對定位+外邊距實現：左右盒子絕對定位，固定於頁面左右兩側；中間盒子的 margin-left,margin-right 分別等於左右兩個盒子的寬度。
/*css*/
*#left
#middle
#right
注意：因為浮動會影響後面的盒子，所以中間的盒子要最後渲染
'left'
>
leftdiv
>
'right'
>
rightdiv
>
'middle'
>
middlediv
>
/*css*/
*#left
#middle
#right
margin: 0 300px 0 200px;改為overflow: hidden;
4.flex布局：中間項設定flex:1，表示佔據所有剩餘空間。
/*css*/
*section
section div:nth-child(1)
section div:nth-child(2)
section div:nth-child(3)
/*css*/
*section
/*第乙個盒子是middle*/
section div:nth-child(1)
/*左邊盒子*/
section div:nth-child(2)
/*右邊盒子*/
section div:nth-child(3)
三欄布局（三列布局）
此 較簡單，左欄左浮動，右欄右浮動，主欄內容放在最後，用margin 值為左右的寬度來實現自適應 注意 不浮動的元素要放在浮動元素後面 如下 此方法與自身浮動法相似，但是使用的是絕對定位，左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主題欄採用左右的margin值來撐開距離 注意 採用浮動的...
CSS布局 三欄布局
題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...
CSS布局 三欄布局
css布局技術可謂是前端技術中最基礎的技術，就是因為基礎，所以我認為要更加熟練，深入的去掌握，去梳理。採用浮動實現的三欄布局有以下特點及注意事項 注意dom結構的排列順序。因為左右兩側的dom都是浮動布局，而中間的dom則是普通的文件流，所以為了規避瀏覽器正常的頁面渲染，即先解析左側dom 浮動 再...