首先講的是三列布局炕倘，左右兩列寬度固定，中間一列寬度自適應
這個很好實現(xiàn)瘤运，左右兩列分別左浮動和右浮動并給一個固定寬度窍霞，中間不浮動，也不設定寬度拯坟。這樣基本就可以了但金。但為了兼容IE還必須做些工作
中間列要不要設置margin-left和margin-right ?
注意，中間那列需要把左右兩個外邊距分別設為左右兩列的寬度郁季，否則會有些問題傲绣。如下：
在谷歌掠哥、火狐等標準瀏覽器下是這樣的（包括IE8+）：
中間那列子元素的margin-left或margin-right的起點是不一致的，在IE6秃诵、IE7中续搀，即使不給中間列設定margin-left和margin-right,它的子元素的左右外邊距的起點仍然是在左右兩列寬的的基礎上的，就像是有margin-left和margin-right一樣菠净。所以為了各瀏覽器保持一致禁舷，中間那列還是設一個margin-left和margin-right為好。
IE6中的3px間隙bug
在上圖的ie6截圖中毅往，我們看到各列之間有一條3px的間隔牵咙，這是只有IE6才有的問題。
如果中間那列的margin-left和margin-right都為0的話攀唯，則只要把左列的margin-right設為-3px,右列的margin-left設為-3px就行了洁桌。
但如果把中間列的margin-left和margin-right分別為左右兩列的寬度時（上面已經(jīng)說了，這也是必須這樣做的）侯嘀，即使把左列的margin-right設為-3px,右列的margin-left設為-3px也還是沒有效果另凌。這時候還得把中間列的margin-left設為左列寬度-3px,margin-right設為右列寬度-3px才行。如下：
最終的代碼
? ?body, div {
? ? ? ?margin:0;
? ? ? ?padding:0;
? ?}
? ?div {
? ? ? ?height:200px;
? ? ? ?color:#F00;
? ?}
? ?.left {
? ? ? ?float:left;
? ? ? ?width:100px;
? ? ? ?background:#00f;
? ? ? ?_margin-right:-3px;
? ?}
? ?.right {
? ? ? ?float:right;
? ? ? ?width:100px;
? ? ? ?background:#0f0;
? ? ? ?_margin-left:-3px;
? ?}
? ?.center {
? ? ? ?background:#333;
? ? ? ?margin:0 100px;
? ? ? ?_margin:0 97px;
? ?}
我是left
我是right
我是center
兩列布局戒幔，一列寬度固定吠谢，另一列自適應布局也是這個道理的。
