Xpressのフロントエンドレコード--------- HTML5 + CSSシリーズ9.0

-------聖杯古典的なレイアウトのレイアウト

　　聖杯のレイアウトがあり、中国であり、それが飛ぶ翼のレイアウトと呼ばれている、淘宝網UEDエンジニア（伝説ユー・ボー）と広がりを改善するために早ければ、2006年にそのレイアウト要件を提案した概念モデルケビン・コーネルのレイアウトいくつかあります。

　　1. 3のレイアウト、中間幅適応、両側の固定幅。

　　2.中央の列が示す優先度がブラウザに表示されます。

　　3.任意の列の最大高さを許可し、聖杯は、レイアウト要件とフライング翼ようなレイアウト

　　図作用に示すように、次の2つの方法が、使用されます

　　実現する方法：フローティング

< DIV クラス= "ヘッダ" > 
    < H4 >ヘッダ</ H4 > 
</ DIV > 

< DIV クラス= "コンテナ" > 
    < DIV クラス= "中間" > 
        < H4 >中央</ H4 > 
        < P >中間コンテンツ</ P > 
    </ divの> 
    
    < divのクラス= "左" > 
        < H4 >左</ H4 >
        < P >左コンテンツ</ P > 
    </ divの> 
    
    < divのクラス= "右" > 
        < H4 >右</ H4 > 
        < P >右コンテンツ</ P > 
    </ DIV > 
</ DIV > 

< DIV クラス= "フッタ" > 
    < H4 >フッター</ H4 > 
</ DIV >

.header、.footer { 
    ボーダー：1ピクセル固体＃ 333 。
    背景：#CCC; 
    テキスト - 整列：センター; 
} 
.footer { 
    クリア：両方。
} 

.container { 
    パディング： 0 220px 0 200pxの。
    オーバーフロー：隠されました; 
} 
.LEFT、.middle、.RIGHT { 
    位置：相対。
    フロート：左; 
    分 - 高さ：130px; 
} 
.middle { 
   幅： 100％ 。
    背景：青; 
} 
.LEFT { 
    マージン -left：-100％ 。
    左：- 200pxの; 
    幅：200pxの。
    背景：赤; 
} 
.RIGHT { 
    マージン -left： - 220px。
    右： - 220px; 
    幅：220px; 
    背景：緑; 
}

　　基本的な考え方：

HTMLでは、その横の滞在いっぱいという、良いヘッダーとフッターのスタイルを定義します。
フローティングと相対的な位置決めには3つの容器に透明フロートフッター前面になるように、中間の（後に使用されます）。
右と3つの固定幅200pxのと220pxの2つの列を左、中央部が中間支持体に完全な100％に配置されています。（幅は任意に設定することができるが）
このような関係、中央が押下二つの領域について、容器全体を占有するフローティングとして
次に、左側の設定 margin-left: -100%;左端ので、左バック行を
外容器に提供された場合しかし、それはそう、真ん中にカバーする padding: 0 220px 0 200px;空いた左の位置に、
この場合には全く残っていないと以前に相対的な位置決めを介して設定されている限りは、そうすることによって、その、左 left: -200px; 左端の左背面
同様に、右の領域に対して、提供 margin-left: -220px; 最初の行の右バックを
この場合には220pxの右側の空きスペース、最終セット `右：-220px; ##ライン上の右側領域の右側に引っ張ら。

　　2つの実装：フレックス弾性ボックス

< DIV クラス= "ヘッダ" > 
    < H4 >ヘッダ</ H4 > 
</ DIV > 

< DIV クラス= "コンテナ" > 
    < DIV クラス= "左" > 
        < H4 >左</ H4 > 
        < P >左コンテンツ</ P > 
    </ divの> 
    
    < divのクラス= "真ん中" > 
        < H4 >ミドル</ H4 >
        < P >中間コンテンツ</ P > 
    </ DIV > 
    
    < DIV クラス= "右" > 
        < H4 >権利</ H4 > 
        < P >右コンテンツ</ P > 
    </ DIV > 
</ DIV > 

< DIV クラス= "フッタ" > 
    < H4 >フッター</ H4 > 
</ DIV >

.header、.footer { 
    ボーダー：1ピクセル固体＃ 333 。
    背景：#CCC; 
    テキスト - 整列：センター; 
} 

.container { 
    ディスプレイ：フレックス。
} 
{.LEFT 
    幅：200pxの。
    背景：赤; 
} 
.middle { 
    フレックス： 1 。
    背景：青; 
} 
.RIGHT { 
    幅：220px; 
    背景：緑; 
}

　　基本的な考え方：　

上記とヘッダーとフッター、完全な横方向の支持。フッターは、浮動をクリアする必要はありません
容器は、右折が意図的正面中央に配置することなく配置することができ、中央左
容器弾性レイアウト display: flex;
ワイド左右の所定の領域、中間の設定 flex: 1; に

　　参考まで：https://segmentfault.com/a/1190000017540629#item-4

Xpressのフロントエンドレコード--------- HTML5 + CSSシリーズ9.0

-------聖杯古典的なレイアウトのレイアウト

おすすめ