一般網頁佈局分為一列，二列，三類，前兩個都好說，那麼html如何進行三列布局，其實有很多種方式(樣式也有很多種，有三列等寬，還有不等寬的)，接下來，我就記錄不等寬兩種，第一種用到的是浮動，第二種用的是定位
工具/原料
sublimeText3
方法1：用絕對定位方式
先在body標籤中寫三個div,
300px
中間
200px
，
如圖：
載入樣式css,詳細程式碼，如圖：
0 如何載入CSS樣式
講解一下上面css,對於左側div（.left），寬300px,高500px，背景顏色，設定定位為絕對定位，離左側為0px，離上側為0px；右側div（.right）差不多；中間div(.middle)不設定寬度，是自適應，只設置高度為500px，背景，主要的是margin值（這四個值分別指上 右 下 左）。
最後三列效果，如圖：
優點：中間寬度自適應
方法2：用浮動定位方式
先在body標籤中寫三個div,
300px
中間
200px
如圖：
載入樣式css,詳細程式碼，如圖：
講解一下上面css,對於最外層容器div(.container)寬800px,高500px，水平居中；左側div（.left），寬200px,高500px，背景顏色，設定浮動定位，離上側為0px；mian div包括了中間和右側，設定浮動定位靠左排列；中間div(.middle)寬400px,高500p高度為500px，背景，設定浮動定位靠左排列；最後右側和左側差不多。
最後三列效果，如圖：
注意事項
如果對您有幫助，麻煩投個票，點個贊，謝謝