利用div+css實現幾種經典布局的詳解，樣式以及代碼！__div

一、左右兩側，左側固定寬度200px，右側自適應佔滿

html代碼

<div class="divBox"><div class="left"></div><div class="right"></div></div>

css代碼

*{margin: 0px;padding: 0px;}.divBox{height: 500px;background: yellow;}.left{float: left;width: 200px;height: 100%;background: red;}.right{margin-left: 200px;background: green;height: 100%;}

這個實現起來比較的簡單,左側的div給浮動，右側的divmargin-left使其從左側div右側開始展現,加背景顏色方便觀察。

二、左中右三列，左右個200px固定，中間自適應佔滿

html代碼

<div class="divBox"><div class="left"></div><div class="right"></div><div class="center"></div></div>

css代碼

                *{margin:0px;padding: 0px;}.divBox{background: yellow;height: 500px;}.left{background: red;float: left;width: 200px;height: 100%;}.center{/*第一種用浮動，加上左右外邊距，不用絕對位置 這裡我推薦把html中的right寫在center的前面,如果按順序寫的話會把right擠到下面，感興趣的可以自己試試*//*margin: 0 200px;*//*第二種用浮動加絕對位置*//*position: absolute;left: 200px;right: 200px;*/background: grey;height: 500px;}.right{background: green;float: right;width: 200px;height: 100%;}

三、上中下三行，頭部200px高，底部200px高，中間自適應佔滿

html代碼

        <div class="divBox"><div class="top"></div><div class="center"></div><div class="bottom"></div></div>

css代碼

*{margin:0px;padding: 0px;}.divBox{background: yellow;width: 100%;}.top{background: red;width: 100%;height: 200px;position: absolute;top: 0;}.center{width: 100%;background: grey;position: absolute;top: 200px;bottom: 200px;}.bottom{width: 100%;background: green;height: 200px;position: absolute;bottom: 0;}

這裡用到了絕對位置，把上面的和下面的分別設定top:0,bottom:0 固定在上下兩端，中間的距離上下200px即可。

四、上下兩部分，底下這個固定高度200px，如果上面的內容少，那麼這個footer就固定在底部，如果內容多，就把footer擠著往下走

html代碼

<div class="divBox"><div class="content"></div><div class="footer"></div></div>

css代碼

*{margin: 0px;padding: 0px;}html{height: 100%;}body{min-height: 100%;position: relative;}.content{width: 100%;background:red;padding-bottom: 200px;}.footer{width: 100%;height: 200px;background: green;position: absolute;bottom: 0;}

固定footer在底部和把foorter往下擠著走都比較容易實現，但是合到一起，就不好弄了吧，其實也不難，更改content的高度，就可以看到效果了

必要的設定就是html要有高度,body的最小高度要有，footer是依照body進行絕對位置的，

瞭解了這些就不難實現了。

這些只是實現經典布局的一些方法，還有其他的方法，這裡就不一一列出了。