周りのCSSレイアウト - アダプティブ中間

レイアウトについては、左の固定幅は、適応の右にある
中間管理インターフェースに共通する、リストはように、モバイルエンドWebとを示しています。
方法1：左の幅に等しい左の絶対位置の設定、右組左余白

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

        .LEFT { 位置：絶対。
            左：0; 
            トップ：0; 
            幅：200pxの。
            高さ：300ピクセル; 
            背景：赤; 
        } 
        .RIGHT { 
            / *使用左外边距* / マージン左：200pxの。
            高さ：300ピクセル; 
            背景：青; 
        }
           

            

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

　　　　.contain { 
            位置：相対; 
            高さ：300ピクセルによって; 
        } 
        .LEFT { フロート：左; 
            幅：300ピクセルによって; 
            高さ：300ピクセルによって、
            背景：赤; 
        } 
        .RIGHT { オーバーフロー：隠された; //コンテンツが親要素の外側に表示される隠し
            背景：青; 
            高さ：300ピクセルによって; 
        }
            
           

方法3：弾性レイアウト

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

方法4：：出回っ、適応部の幅が設定されている幅：計算値（100％ - 200pxの）。

　　     .contain { 
            位置：絶対。
            
            幅：100％; 
            高さ：100％; 
        } 

        .LEFT { 
            フロート：左; 
            
            幅：200pxの。
            高さ：100％; 
            背景色：＃72e4a0。
        } 

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