レイアウトCSS - フライングウイングのレイアウトと聖杯

翼のレイアウトと聖杯を飛行することは、古典的な3列のレイアウトです。2つのレイアウトが実質的に同じ結果を達成するために、一定の幅の両側にある2つの列、中央の列の適応の幅があります。（どちらのレイアウトは比較的古いです）

パフォーマンス、および互換性を向上させるための第一の中間レンダリングが良好であることを確実にするために上部の真ん中の列のHTML構造。長所と短所の後半を達成するための2つのレイアウトの実装の同じ前半、次のことが簡単に違います。

レイアウトの影響：

注意点：

最初の中間部分をレンダリングすることを保証するために先頭に位置する1 .middle要素、

要素がライン上に残るように、前記3つの要素は、浮遊しています

3. .middle素子幅はによってライン上に、100％に設定されています

4. .LEFT要素はマージン左に配置された：（200pxの要素幅）：; -200px左端の位置を占めるように-100％を、.RIGHT要素はマージン左に配置され

5. .LEFT .RIGHT要素と不明瞭側.middle要素の周囲の要素、

ブロッキングのために、溶液は、（中央テンの両側に開いた位置）翼フライングし、サブエレメントは、左右のチャンネルを作るためにマージン値によって、.middleが設けられています。

溶液は、聖杯のレイアウトで、ブロッキングのために三つの要素の親の追加パディング特性、及び開位置テン残っ続いても、中間コンテンツを引き戻す（両方とも比較的開放位置テンが中間に位置）が、あなたは相対的な位置が左に使用して左にそれを復元したいので、右、同様-200pxだけでなく、相対的な位置は、右の復元：-220pxを

コードを貼り付けます。

フライングウィング：

<！DOCTYPE HTML > 
< HTML のlang = "EN" > 
< ヘッド> 

    < メタのcharset = "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
    .middle { 
        幅：100％ 。
        高さ：200pxの。   
        背景：#abcdef 。
        フロート：左; 
    } 
    .middleChild { 
        / *マージン：0 200pxの。* / 
        高さ：100％; 
    } 
    .LEFT、.RIGHT { 
        幅：200pxの。
        高さ：200pxの。
        フロート：左; 
    } 
    .LEFT { 
        背景：#CCC 。
        余白左：-100％; 
    } 
    .RIGHT { 
        背景：ピンク。
        margin-left ：-200px ; 
    }
    .LEFT、
    .middle、
    .RIGHT { 
        テキスト整列：センター。
        行の高さ：200pxの。
    } 

    </ スタイル> 
</ ヘッド> 
< ボディ> 
        < DIV クラス= "中間" > 
             < DIV クラス= "middleChild" >中央</ DIV > 
        </ DIV > 
        < DIV クラス= "左" >左</ DIV >
        div クラス= "右" >右</ DIV > 
</ ボディ> 
< スクリプト> 


</ スクリプト> 
</ HTML >

コードの表示

聖杯のレイアウト

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 

    < メタ文字コード= "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
    .container { 
        パディング：0 200pxの。
    } 
    .middle { 
        幅：100％ 。
        高さ：200pxの。   
        背景：#abcdef 。
        フロート：左; 
        / * 位置：相対; * / 
    } 
    .middleChild { 
        / * マージン：0 200pxの。* / 
        高さ：100％; 
    } 
    .LEFT、.RIGHT { 
        幅：200pxの。
        高さ：200pxの。
        フロート：左; 
        位置：相対; 
    } 
    .LEFT { 
        背景：#CCC 。
        margin-left：-100％; 
        左：-200px ; 
    } 
    .RIGHT { 
        背景：ピンク。
        margin-left ：-200px ; 
        右：-200px ; 
    } 
    .LEFT、
    .middle、
    .RIGHT { 
        テキスト整列：左。
        行の高さ：200pxの。
    } 

    </ スタイル> 
</ ヘッド> 
< 身体> 
    < div要素クラス= "コンテナ" > 
        < divのクラス= "真ん中" > 
             <！ - <DIV CLASS = "middleChild">ミドル</ div> - > 
             ミドル
        </ divの> 
        < divのクラス= "左" >左</ DIV > 
        < DIV クラス= "右" >右</ DIV > 
    </ DIV > 
</ ボディ> 
< スクリプト> 


</ スクリプト>
</ HTML >

View Code

レイアウトCSS - フライングウイングのレイアウトと聖杯

おすすめ