ホーリーグレイルのレイアウトの詳細な説明-フローティング

聖杯のレイアウトとは何ですか：

• ホーリーグレイルのレイアウトは、両側が固定幅で中央が適応型の3列のレイアウトです。
• 中央の列はドキュメントフローの前に配置され、最初にレンダリングされます。
• 目的は、3列のレイアウトを解決することです。

フローティング実現：

実現効果：

最初のHTML：

• ヘッドタグ<header></header>、
• コンテンツ領域に<div class="container"></div>は、中央、左、右に3つのdivタグが含まれています。
• 下部<footer></footer>ラベル

HTMLコード：

	//标题
    <header><h4>Header内容区</h4></header>
    //内容区
    <div class="container">
    	//中间区域
        <div class="middle column">
            <h4>中间区域</h4>
            <p>圣杯布局要求header和footer各自占领屏幕所有宽度，高度固定
                中间的container是一个三栏布局
                三栏布局两侧宽度固定不变，中间部分自动填充整个区域
                中间部分的高度是三栏中最高的区域的高度
            </p>
        </div>
        //左边区域
        <div class="left column">
            <h4>左边栏</h4>
        </div>
        //右边区域
        <div class="right column">
            <h4>右边栏</h4>
        </div>
        //清除浮动
        <div style="clear: both"></div>
    </div>
    //底部
    <footer><h4>Footer内容区</h4></footer>

CSSコード：

• まず、中央、左、右の3つのdivをフロートに設定します。

• <div class="middle"></div>cssが100％大きいdivの幅全体を占めるように中間化し、この時点で残されたものがdivの下部にプッシュされてブロックされます。（以下に示すように）
  

• この時点で、外側のコンテンツ領域の左右のパディングを設定して、左右のdivが戻ってきたときに位置を指定する必要があります。（結果は以下のとおり）
  

• 次に、左側の列を前の行に戻します。<div class="left"></div>相対的な位置（通常の位置に対する）position:relativeとmargin-left:-100%（なぜ100％なのか？100％を設定した後、の左側に揃えることができるため）を指定する必要があります。真ん中の列）;
  

• 最初の行の左端に戻すには、スタイル属性を<div class="left"></div>追加する必要がありright: 200px;ます。
  

• 同じ原理で、右の列に1つを与えてmargin-right: -150px;元の位置に戻すと、レイアウトが完成します。
  

		*{
    
    
            margin: 0;
            padding: 0;
        }
        body{
    
    
            min-width: 550px;
        }
        header{
    
    
            height: 40px;
            background-color: #50a0c3;
            padding-top: 10px;
            text-align: center;
            line-height: 40px;
            color: white;
        }
        .container{
    
    
            padding-left: 200px;
            padding-right: 150px;
        }
        .column{
    
    
            float: left;
        }
        .middle{
    
    
            width: 100%;
            height: 350px;
            background-color: salmon;
            text-align: center;
            padding-top: 50px;
        }
        .left{
    
    
            width: 200px;
            height: 400px;
            background-color: #d8e6a4;
            margin-left: -100%;
            position: relative;
            right: 200px;
            text-align: center;
            line-height: 400px;
        }
        .right{
    
    
            width: 150px;
            height: 400px;
            margin-right: -150px;
            text-align: center;
            line-height: 400px;
            background-color: #bed28c;
        }
        footer{
    
    
            width: 100%;
            height: 40px;
            background-color: #5b6063;
            text-align: center;
            line-height: 40px;
        }