の聖杯を達成するために、3列レイアウトモード

また、フライングウィングとして知られている3つの列のレイアウト、

三つのレイアウト、中間適応の幅が、両側の固定幅。
中央の列は、ブラウザでレンダリングする優先順位を示しています。
最大高さは、任意の列を許可しました。
主マージン左= 100％は、変速線,,ボックスサイズ=パディング+マージン+ボーダー+ cotnentに利用することができます
実際には、左と右のShenmaを移動するための親クラスの幅にパディングコンテナ,,マージン左= 100％の相対的に,, ,,理解できないだろう繰り上げ

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

<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>布局、圣杯模式</ TITLE> 
    <スタイル> 
        * { 
            マージン：0; 
            パディング：0; 
        } 
        ＃ヘッダ、フッタ＃{ 
            背景色：緑。
            テキスト整列：センター; 
        } 
        #container { 
            / *幅：100％。* / 
            パディング：0 150ピクセル0 200pxの。
            高さ：500pxなど; 
            背景色：金;
        }
        .column { 
            フロート：左; 
            高さ：100％; 
            位置：相対; 
        } 
        #center { 
            幅：100％。
            背景色：hotpink。
        } 

        #right { 
            左：150ピクセル。
            幅：150ピクセル; 
            背景色：青。
            margin-left：-150px; 

        } 
        #left { 
            左：-200px。
            幅：200pxの。
            背景色：royalblue。
            余白左：-100％; 

        } 

    </スタイル> 

</ head>の
 
<BODY>
        <DIV ID = "ヘッダ">ヘッダ</ DIV> 
        <DIV ID = "コンテナ"> 
          <DIV ID = "中心"クラス= "列">中心</ DIV> 
          <DIV ID = "左"クラス= "列">左</ DIV> 
          <DIV ID ="右」クラス= "列">権利</ div> 
        </ div> 
        <DIV ID = "フッタ">フッター</ div> 

</ body> 

</ HTML>

　　フライング翼,,方法2つの実装

主コンテナ要素中性子マージンにギャップ測位位置、左右,,と,,中間パディング値を残して除去
多目的のdiv

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>双飞翼</ TITLE> 
    <スタイル> 
     
        * { 
            マージン：0; 
            パディング：0; 
        } 
        本体{最小幅：700px;} 
        ＃ヘッダ、フッタ＃{ 
            背景色：緑。
            テキスト整列：センター; 
        } 
        #container { 
            高さ：500pxなど。
            背景色：金;
            フロート：左; 
            高さ：100％; 
     
        } 
        #center { 
            幅：100％。
            背景色：hotpink。
        } 

        #right { 
         
            幅：150ピクセル。
            背景色：青。
            margin-left：-150px; 

        } 
        #left { 
            / *左：-200px。* / 
            幅：200pxの。
            背景色：royalblue。
            余白左：-100％; 

        } 
        .SUB { 
            マージン：0 150ピクセル0 200pxの。
        } 

    </スタイル> 
</ HEAD> 
<BODY> 
        <DIV ID = "ヘッダ">ヘッダ</ div>
        <DIV ID = "コンテナ"> 
          <DIV ID = "中心"クラス= "列"> <DIV CLASS = "サブ">中心</ div> </ div> 
          <DIV ID = "左"クラス= "列" >左</ DIV> 
          <DIV = "右"クラス= "列" ID>権利</ div> 
        </ div> 
        <DIV ID = "フッタ">フッター</ div> 
</ body> 
</ HTML>

　フレックスレイアウト

　　　　ルアンYifeng Flexの詳細な記事の例

　　　　絶対位置を達成することができ、

<！DOCTYPE HTML>

<ヘッド>

<メタ文字セット= "UTF-8">

<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>

<タイトル>レイアウト、絶対位置</ TITLE>

<スタイル>

* {

マージン：0;

パディング：0;

}

{最小幅：700px;}本体

＃ヘッダ、＃フッター{

背景色：緑;

テキスト整列：センター;

}

＃容器{

/ *幅：100％; * /

高さ：500pxなど。

背景色：金;

位置：相対;

}

。行{

位置：絶対;

高さ：100％;

トップ：0;

}

＃センター{

マージン：0 150ピクセル0 200pxの。

/ *幅：100％; * /

背景色：hotpink。

高さ：100％;

}

＃右{

右：0;

幅：150ピクセル;

背景色：青。

}

＃左{

左：0;

幅：200pxの。

背景色：royalblue。

}

</スタイル>

</ head>の

<身体>

</ div>左<DIV ID = "左" クラス= "列">

</ div>

</ BODY>

</ HTML>

の聖杯を達成するために、3列レイアウトモード

フライング翼,,方法2つの実装

おすすめ

　　フライング翼,,方法2つの実装