1. 程式人生 > >常用的佈局方式

常用的佈局方式

常用的佈局方式

1)兩列布局、左邊固定、右側自適應

第一種實現方式:把左邊的寬高寫死,右邊的div用相對定位定位過去,把左側的div的位置讓出來

    <div class="box1"></div>
    <div class="box2"></div>
        .box1 {
            width: 200px;
            height: 400px;
            background: #ff5d00;
        }
        .box2 {
            height
: 400px; background: green; position: relative; left: 202px; top: -400px; }

第二種實現方式:div1可以用浮動或者絕對定位,使其脫離文件流,然後div2就會被蓋住了,然後為div2設定一個margin-right,讓其自己漏出來

    <div class="box1"></div>
    <div class="box2"></div>
        .box1
{ width: 200px; height: 400px; background: #ff5d00; /*float: left;*/ position: absolute; } .box2 { height: 400px; background: green; margin-left: 202px; }

2)三列布局、左右固定、中間自適應

左右的div寬高寫死,一個左浮動,一個右浮動,中間的不設定寬度,然後設一個左右外邊距,讓自己露出來,要不有一部分就蓋在了下面

    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
        .left , .right {
            width: 200px;
            height: 400px;
            background: #ff5d00;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .center {
            height: 400px;
            background: green;
            margin: 0 202px;
        }

3)三列布局、頭尾固定、中間自適應(手機常用的佈局)

把header和footer都固定定位,一個top設為0,另一個bottom設為0
中間的div設為絕對定位,然後把top和bottom讓出來,防止蓋住,left和right都設為0,這樣就伸開了。
為了使中間的內容有滾動條,中間的div加一個overflow: scroll

    <div class="header">header</div>
    <div class="content">
        content <br>
        content <br>
        ...
        ...
    </div>
    <div class="footer">footer</div>
        .header , .footer {
            height: 30px;
            background: #ff0000;
            width: 100%;
            position: fixed;
        }
        .header {
            top: 0;
        }
        .footer {
            bottom: 0;
        }
        .content {
            background: #cccccc;
            position: absolute;
            top: 30px;
            bottom: 30px;
            left: 0;
            right: 0;
            overflow: scroll;
        }