CSS 2列のレイアウト

方法1：絶対位置を左、左と右の余白セットを設定し、同じ幅寸法の左

// CSS部分：
        .contain { 
            位置：相対。
            高さ：300ピクセル ; 
        } 

        .LEFT { 
            位置：絶対。
            左：0 ; 
            トップ：0 ; 

            幅：200pxの。
            高さ：300ピクセル ; 
            背景：赤 ; 
        } 
        .RIGHT {
             / *使用して左余白* / 
            マージン左：200pxの ; 
            高さ：300ピクセルによって ; 
            背景：青 ; 
        } 

// HTMLセクション：
<DIV CLASS = "は含まれ"> 
     <DIV CLASS = "左">に設定したまま幅</ DIV> 
     < DIV CLASS = "右">右適応</ div> 
 </ div>

方法2：浮動左サイドを設定し、右が溢れコンテンツを非表示にするには

.contain { 
位置：相対。
高さ：300ピクセル ; 
} 
.LEFT { 
フロート：左 ; 
幅：300ピクセル ; 
高さ：300ピクセル ; 
背景：赤 ; 
} 
.RIGHT { 
オーバーフロー：隠されました。
背景：青 ; 
高さ：300ピクセル ; 
} 

<DIVクラスは= "含む">  
     <DIV CLASS = "左">左边定宽</ div>
     <DIV CLASS = "右">右边自适应</ div>
 </ div>

方法3：弾性レイアウト

.contain { 
   ディスプレイ：フレックス。
} 
.LEFT { 
    幅：200pxの。
    高さ：200pxの。
    背景：赤 ; 
} 
.RIGHT { 
    フレックス：1。
    高さ：200pxの。
    背景：青 ; 
}

方法4：左右に浮遊するように設定され、幅：計算（）

.contain { 
    位置：絶対。
    幅：100％ ; 
    高さ：100％ ; 
} 
.LEFT { 
    フロート：左 ; 
    幅：200pxの。
    高さ：100％ ; 
    背景色：＃72e4a0。
} 
.RIGHT { 
    フロート：左 ; 
    幅：計算値（100％ - 200pxの）。
    高さ：100％; 
    背景色：＃9dc3e6。
}

最終結果：