今天小編介紹自適應(yīng)布局實(shí)現(xiàn)方法的demo，
1）左側(cè)固定寬度，右側(cè)自適應(yīng)，隨著窗口的寬度而變化；
2）右側(cè)固定寬度，左側(cè)自適應(yīng)；
3）中間自適應(yīng)，兩邊定寬
1、左定寬
用左側(cè)margin-left設(shè)為負(fù)寬度的方法，因為左側(cè)脫離文檔流，右側(cè)寬度設(shè)為100%
效果如下：

left.png

代碼如下：

.head{
            display: block;
            text-align: center; 
            line-height: 50px;
            height: 40px;
            background-color: yellow;
            color: purple;
        }
        .body{
            display: block;
            height: 400px;
            width: 100%;
        }
        .left{
            float: left;
            width: 100px;
            height: 100%;
            background-color: pink;
            margin-right: -100px;
        }
        .right{
            height: 100%;
            width: 100%;
            color: white;
            background-color: lightblue;
            float: left;
            margin-left: 100px;
        }
        .foot{
            display: block;
            width: 100%;
            height: 40px;
            background-color: yellow;
            text-align: center;

        }

細(xì)節(jié)解釋：line-height等于height可以使文本上下居中，如果line-height超過height，以height為準(zhǔn)
2、右定寬
仍然采用margin方法，但這里有一個瑕疵，左側(cè)的部分會被遮擋

right.png

.right{
            float: right;
            width: 100px;
            height: 100%;
            background-color: pink;
            margin-left: -100px;
        }
        .left{
            height: 100%;
            width: 100%;
            color: white;
            background-color: lightblue;
            float: left;
        }

3、中間自適應(yīng)
實(shí)現(xiàn)方法是，左右兩邊浮動，且在html中先寫左右標(biāo)簽，后寫中間標(biāo)簽，利用瀏覽器從上到下解析html標(biāo)簽的特點(diǎn)

middle.png

.body{
            display: block;
            height: 400px;
            width: 100%;
        }
        
        .left{
            height: 100%;
            float: left;
            width: 100px;
            background-color: pink;
        }
        .middle{
            background-color: lightblue;
            height: 100%;
        }
        .right{
            height: 100%;
            float: right;
            width: 100px;
            background-color: lightgreen;
        }