CSSは6つの適応型2列レイアウト方法を実装しています

  <本文>
        <div class="wrapper">
            <div class="left"></div>
            <div class="right"></div>
        </div>
   </本文>

.ラッパー{
    ディスプレイ:フレックス;
}
。左{
    幅:200px;
    高さ:400px;
    背景：黒;
}
。右{
    フレックス：1;
    高さ:400px;
    背景:赤;
}

。左{
    フロート:左;
    幅:200px;
    高さ:400px;
    背景：黒;
}
。右{
    背景:赤;
    高さ:400px;
}

。左{
    幅:200px;
    高さ:400px;
    フロート:左;
    背景：黒;
}
。右{
    オーバーフロー:非表示;
    高さ:400px;
    背景:赤;
}

.ラッパー{
    位置:相対;
}
。左{
    幅:200px;
    高さ:400px;
    背景：黒;
}
。右{
    位置:絶対;
    トップ:0;
    左:200px;
    右:0;
    下:0;
    背景:赤;
}

.ラッパー{
    表示:テーブル;
    幅:100%;
}
.左、.右{
    表示:テーブルセル;
    高さ:400ピクセル
}
。左{
    背景：黒;
}
。右{
    背景:赤;
}

.ラッパー{
    表示:グリッド;
    幅:100%;
    高さ:400px;
    グリッドテンプレート列:200px 自動;
}
。左{
    背景：黒;
}
。右{
    背景:赤;
}