一般的なレイアウト

一般的なレイアウト
1)2列レイアウト、左固定、右適応
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;
        }

第2の実装形態:div 1は、ドキュメントストリームから離れるようにフローティングまたは絶対的に位置決めされ、div 2が覆われ、div 2に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は幅が高くて、1つの左が浮動して、1つの右が浮動して、中間のは幅を設けないで、それから1つの左右の外の距離を設けて、自分を露出させて、さもなくば一部は下に覆いました

    <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)三列レイアウト、頭尾固定、中間適応(携帯電話でよく使われるレイアウト)
ヘッドとfooterを固定して位置決めし、1つのtopを0、もう1つのbottomを0の中間のdivを絶対位置決めし、topとbottomを出してカバーを防止し、leftとrightを0にすることで伸ばします.中間の内容にスクロールバーがあるように、中間のdivにoverflow:scrollを追加します.

    <div class="header">headerdiv>
    <div class="content">
        content <br>
        content <br>
        ...
        ...
    div>
    <div class="footer">footerdiv>

        .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;
        }