參考：
兩個很好的方法解決這個問題：
1：css2傳統方法，讓第乙個盒子左浮動，第二個盒子右浮動，且都設定好固定寬度，中間第三個盒子只設定一下高度，不要設定寬度或者設定寬度為auto，中間盒子就會去自適應寬度，看一下**
這裡要絕對要注意的就是center這個盒子的margin-left和margin-right，他們是到父容器的左邊框和右邊框的距離，不是到左邊盒子和右邊盒子的距離，意思就是center這個盒子的margin-left=190一定要大於left這個盒子的寬width=180,不然他們就會重疊。同理右邊
2：用css3的box-flex屬性，css3增加了這個屬性之後，更方便了，可以不用定義浮動了
這裡要注意的是因為css3還沒有統一，各個瀏覽器在 box-flex屬性上有自己的定義方式， -moz-box-flex是火狐的， -webkit-box-flex是chrome和safari的，必須全部定義，假如定義chrome的，到了火狐上就不相容沒效果。 box-flex屬性，盒子固定寬度就以固定寬度顯示，如果沒有固定寬度，就自適應寬度，比如 box-flex:2就是自適應，當然2的意思就是父容器總寬度的2份，假如左盒子是1中間是2右邊是2，父容器總寬度為500px，那麼左邊就是100px中間是200px右邊是200px。當然，這裡的 box-flex:2可以隨便寫，因為左右盒子的寬度固定了，瀏覽器會認為中間盒子的寬度就是剩下的寬度了，設定乙個2不起作用了。還有乙個要注意的是，這裡要注意盒子的順序，嚴格的左中右來，如果像第一種方法那樣先引用right樣式在引用center樣式的話，就會變成，左盒子和中盒子固定寬度，右盒子自適應寬度了
CSS 多列布局 三列布局
下面的 演示了3列布局的用法。html head title 三列布局 styletype text css body column1of3,column2of3,column3of3 body h1style color 706fd3 軟體開發，成就夢想 h2 ahref 學程式設計，上利永貞網 ...
CSS三列布局
1 使用float margin實現 class wrap class left 左列定寬div class center 中間定寬div class right 右列自適應div div wrap left center right 2 使用float overflow實現 right 3 使用t...
CSS 三列布局（三欄布局）
傳統三列布局 左右定寬，中間自適應 1.絕對定位 外邊距實現 左右盒子絕對定位，固定於頁面左右兩側 中間盒子的 margin left,margin right 分別等於左右兩個盒子的寬度。css left middle right 2.浮動 外邊距實現 左右盒子浮動到頁面兩側，中間盒子的 marg...