這篇文章中主要將自己學到的兩欄布局和三欄布局的方法總結一下
兩欄布局，左側固定，右側自適應
結構：
.left
.right
html：
.right
.left
(2)除了用float浮動外，還可以用定位的方式，浮動和定位(position：absolute)都可以使元素脫離文件流，從而使下邊的div跑上去。
兩側固定，中間自適應
方法一：
html:
.left
.center
.right
方法二： 基本思想和方法一類似
html
*
.left
.center
.right
方法三：
html:
*
.father
.left
.center
.right
方法四：聖杯布局
html:
*
.father
.center
.left
.right
(1)設定父元素的高度是200px
(2)設定center，left，right的高度均為100%，設定center的寬度為100%，left的寬度為200px，right的寬度為220px。這時三個div是垂直排列的。
(3)cener，left，right均為左浮動，這時left和right為一排。
(4)為left設定margin-left:-100%，為right設定margin-left:-220px，這時left和right把中間部分遮住了。
(5)設定父元素的padding: 0 220px 0 200px，為左右兩個部分騰出位置。
(6)為left設定position: relative; left: -200px;為right設定position: relative;
right: -220px;
方法五： 雙飛翼布局
html:
*
.father
.main
.left
.right
.center
(1)為father設定height: 200px;
(2)為left，right，main部分設定高度為100%，為left設定寬度為200px，為right設定寬度為220px，為main設定寬度為100%，center部分設定高度為100%。
(3)left，right，main設定float:left
(4)為left設定margin-left: -100%，為right設定margin-left: -220px。
(5)中間部分cener設定margin-left: 200px, margin-right:220px。
聖杯布局和雙飛翼布局的不同之處就在於解決中間部分被遮住的方法不同，聖杯布局是為父元素設定padding，而雙飛翼布局是為中間部分設定margin的方法。
聖杯布局和雙飛翼布局的優點是優先渲染中間部分。
方法六網格布局：
html：
*
.father
.left
.right
.center
table布局：
left
center
right
*
.father
.left
.right
.center
兩欄布局和三欄布局
class class left 我是文字測試君div class right 我是文字測試君div div 給固定寬度的一方設定浮動，給自適應的一方設定100 寬度值，用浮動控制左右寬固固定或自適應 left right style ie8及以下不支援 如果是左側固定右側自適應，給父級positi...
三欄布局與兩欄布局
html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...
兩欄布局與三欄布局
一 兩欄布局 left 左邊定寬 div right 右邊自適應,前端前端前端前端前端前端前端前端前端前端 div 1 left right2 left right3 left right二 三欄布局，中間自適應 container middle 中間 div left 左側 div right 右...