div+css實現幾種經典布局的詳解

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

 

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

        .divBox{
            height: 500px;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
        }
        .right{
            margin-left: 200px;
            height: 100%;
        }

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

 

 

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

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

 .divBox{
    height: 500px;
}
.left{
    float: left;
    width: 200px;
    height: 100%;
}
.center{
    margin: 0 200px;
    height: 500px;
}
.right{
    float: right;
    width: 200px;
    height: 100%;
}

 

 

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

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

        .divBox{
            width: 100%;
        }
        .top{
            width: 100%;
            height: 200px;
            position: absolute;
            top: 0;
        }
        .center{
            width: 100%;
            position: absolute;
            top: 200px;
            bottom: 200px;
        }
        .bottom{
            width: 100%;
            height: 200px;
            position: absolute;
            bottom: 0;
        }

 

 

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

 

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

 

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

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

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

 

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

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

 

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