CSSの研究ノート - 聖杯のレイアウトとフライングウイング

翼杯レイアウトフライング中間適応3列レイアウトの左右幅に固定され、主な違いは、異なる実装です。

まず、聖杯のレイアウト

< のdiv クラス= "親" > 
    < divのクラス= "センター" >センター</ divの表示描画優先EDITORIALの主要部分の> // DOM構造
    < divのクラス= "左" >左</ divの> 
    < divのクラス= "右" >右</ DIV > 
</ DIV >

.parent { 
    パディング：0 100ピクセル。
} 
.center、.LEFT、.RIGHT { 
    高さ：100pxに。
    フロート：左; 
} 
.center { 
    幅：100％ 。
    背景色：黄色 ; 
} 

.LEFT { 
    マージン左：-100％。
    幅：100ピクセル ; 
    背景色：赤。
    位置：相対 ; 
    左：-100px ; 
} 
.RIGHT { 
    位置：相対。
    右：-100px ; 
    margin-left：-100px ; 
    幅：100ピクセル ; 
    背景色：springgreen。
}

達成するための詳細な手順をステップ：

1. 3つの列は、同じ行動でそれをフローティングのままとしました。

2.centerメインコンテンツ部に配置された幅：100％、それは全体のライン、左を充填し、右の部分は次の行をプッシュできます。

3.左側の部分は余白左に提供される文書の流れは第二行の先頭に左ため-100％、マージン左フローは、文書、前方すなわち負の移動に基づいており、任意の負の値は、第2の移動体に設定されていますライン、-100％は、ドキュメントフロー位置の先頭に移動します。マージン左も右の第1行の最後の部分を作るために、右側の右側部分の幅の負の部分に等しくセット。

4.同じ行の左右には、3つの列を有するが、幅方向中央部が不明瞭それぞれ左右の部分に至る100％行全体が充填されているので、我々はパディングプロパティの幅にほぼ等しく設定され、親要素、その中央部そう空の位置の減少は左右部分。

5.最後に、配置された左右の部分の相対的な位置決めは、それぞれ、各オフセット幅は、最終的な効果を達成するために空いた位置へ移動しました。

第二に、フライングウイング

< DIV クラス= "コンテンツ" > 
    < DIV クラス= "センター" > 
        < DIV クラス= "center_content" >中心</ DIV > 
    </ DIV > 
    < DIV クラス= "左" >左</ DIV > 
    < DIV クラス= "右" >右</ DIV > 
</ DIV >

.center、.LEFT、.RIGHT { 
    高さ：100pxに。
    フロート：左 ; 
} 
.center { 
    幅：100％ 。
    背景色：黄色 ; 
} 
.center_content { 
    マージン：0 100ピクセル。
} 
.LEFT { 
    マージン左：-100％ 。
    幅：100ピクセル ; 
    背景色：赤。
} 
.RIGHT {
    margin-left：-100px ; 
    幅：100ピクセル ; 
    背景色：springgreen。
}

達成するための詳細な手順をステップ：

中央部分のHTMLのdiv余分な層で1

2. 3つの列は、それぞれ、同じ行にそれをフローティングのまま。

3.centerメインコンテンツ部に配置された幅：100％、それは全体のライン、左を充填し、右の部分は次の行をプッシュできます。

4.左側の部分は余白左に提供される文書の流れは第二行の先頭に左ため-100％、マージン左フローは、文書、前方すなわち負の移動に基づいており、任意の負の値は、第2の移動体に設定されていますライン、-100％は、ドキュメントフロー位置の先頭に移動します。マージン左も右の第1行の最後の部分を作るために、右側の右側部分の幅の負の部分に等しくセット。

左右位置の中心部内の空間は、最終的な効果を達成するように5、左右部に等しい内部中央DIV設定マージン幅を追加します。

次のよう杯のレイアウトは同じである前にウイングの設定手順をフライング、違いは次のとおりです。

　　フライングウイング：インテリアそのプロパティのマージンを設定するための追加のdivを追加

　　杯レイアウト：親要素に配置されたパディング特性は、左と右の部分は、相対的な位置決めは、オフセット

CSSの研究ノート - 聖杯のレイアウトとフライングウイング

おすすめ