2列レイアウトおよび3列レイアウト

二列レイアウト
1、calcを利用して幅を計算する方法.

.left {
        float: left;
        height: 50px;
        width: 200px;
        background-color: red;
}
.right {
        height: 50px;
        width: calc(100%-200px);
        background-color: blue;
 }

    
     

2、floatを利用してmarginと協力して実現する.

.left {
    float: left;
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    margin-left: 200px;
    background-color: blue;
}

    
     

3、float配合overflowで実現する.

.left {
    float: left;
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    background-color: blue;
    overflow: hidden;
}

    
     

4、flexを利用して実現する.

.contain{
    display: flex;
}
.left {
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    width: 100%;
    background-color: blue;
}

    
     

三段組み
1、float-margin方法.
欠点:DOM構造の制限 - - のため、プライマリ・コンテンツが最初にロードされません.高さの中間の高さがmarginを超えていない場合に問題が発生します(文字で囲まれています):解決策はフローティングをクリアするかBFCを作成します(実質的にフローティングをクリアします)..left { float: left; height: 200px; width: 200px; background-color: red; } .right { width: 200px; height: 200px; background-color: blue; float: right; } .main { margin-left: 200px; margin-right: 200px; height: 200px; background-color: green; }

2、BFCルール.left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: yellow; } .main { background-color: green; height: 200px; overflow: hidden; }

3.聖杯レイアウト.left { float: left; width: 100px; height: 200px; margin-left: -100%; background-color: red; /* container margin-left */ position: relative; left: -100px; } .right { float: left; width: 100px; height: 200px; margin-left: -100px; background-color: yellow; /* container margin-right */ position: relative; right: -100px; } .main { float: left; width: 100%; height: 200px; background-color: blue; } .container{ margin-left: 100px; margin-right: 100px; }

4.ダブルフラップレイアウト.main { float: left; height: 200px; width: 100%; background-color: yellow; } .content { height: 200px; margin-left: 110px; margin-right: 220px; background-color: green; } .left { float: left; height: 200px; width: 100px; margin-left: -100%; background-color: red; } .right { width: 100px; height: 200px; float: left; margin-left: -200px; background-color: blue; }

5、flexレイアウト.container{ display: flex; } .main { height: 200px; width: 100%; background-color: yellow; } .left { height: 200px; order: -1; width: 100px; background-color: red; } .right { width: 100px; height: 200px; background-color: blue; }

111