三種實現(xiàn)圣杯布局方法

本文介紹三種實現(xiàn)圣杯布局的方法,前兩種可歸為一類，與第三種方法差別在于加載順序不同。

圣杯布局實現(xiàn)1：

步驟1：給出 HTML結(jié)構(gòu)：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
        <title>圣杯布局1</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                text-Align: center;
            }
            #top {
                background: #666; 
                height: 60px;
            }
            #left {
                background: #E79F6D;   
            }
            #content {
                background: #D6D6D6;    
            }
            #right {
                background: #77BBDD;   
            }
            #foot {
                background: #666; 
                height: 50px;
            }
</style>      
    </head>
    <body>
        <div id="parents">
            <div id="top">這是Top!</div>
            <div id="main">
                <div id="left">這是Left!</div>
                <div id="content">這是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>這是多行高度！<br></div>
               <div id="right">這是Right!</div>
            </div>
           <div id="foot">這是Foot!</div>
        </div>
    </body>
</html>

效果如下：

Paste_Image.png

步驟2：

  • 設(shè)置中間三個div向左浮動，使其排列在一行： #left, #content,#right{ float:left;}。
  • 設(shè)置Foot元素清除浮動，阻止與上面的main部分重疊：#foot { background: #666; height: 50px; clear: both;}。
  • 設(shè)置中間三個div的寬度，左右定寬，中間寬度自適應(yīng)：
            #left {
                background: #E79F6D;
                width: 150px;
            }
            #content {
                background: #D6D6D6;  
                width: 100%;
            }
            #right {
                background: #77BBDD;  
                width: 200px;
            }

效果如下：


Paste_Image.png

步驟3：

  • 現(xiàn)在Content寬度為100%，占滿整個瀏覽器寬度，若想要中間Content給兩邊Left和Right挪出空間，則需要設(shè)置容器main左右padding值。
  • 由于容器main內(nèi)元素均設(shè)置左浮動，都不在文檔流中，導(dǎo)致main高度塌陷，設(shè)置overflow:hidden可解決該問題。
#main{
     padding-left: 150px;
     padding-right: 200px;
     background-color: bisque;
     }

效果如下：

Paste_Image.png

步驟4：

由于設(shè)置padding后，中間三個div寬度之和超過瀏覽器寬度，所以各獨占一行，要使Left元素和Right元素分別移動到Content的左右兩邊，則需要給Left設(shè)置負(fù)的margin-left,給Right設(shè)置負(fù)的margin-right。

            #left {
                background: #E79F6D;
                width: 150px;
                margin-left: -150px;;
            }
            #right {
                background: #77BBDD;  
                width: 200px;
                margin-right: -200px
            }

效果如下：

Paste_Image.png

步驟5：

使中間三個div高度自適應(yīng)，即高度相等且等于高度最大的div，使用內(nèi)外下邊距相抵消的方法：
#left, #content, #right { float:left; padding-bottom: 2000px; margin-bottom: -2000px; }
最終效果如下：

Paste_Image.png

最終代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
        <title>圣杯布局1</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                text-Align: center;
            }
            #top {
                background: #666; 
                height: 60px;
            }
            #left, #content,#right{
                float:left;
                margin-bottom: -2000px;
                padding-bottom: 2000px;
                
            }
            #main{
                padding-left: 150px;
                padding-right: 200px;
                background-color: bisque;
                overflow: hidden;
            }
            #left {
                background: #E79F6D;
                width: 150px;
                margin-left: -150px;;
            }
            #content {
                background: #D6D6D6;  
                width: 100%;
            }
            #right {
                background: #77BBDD;  
                width: 200px;
                margin-right: -200px;
            }
            #foot {
                background: #666; 
                height: 50px;
                clear: both;
            }
</style>      
    </head>
    <body>
        <div id="parents">
            <div id="top">這是Top!</div>
            <div id="main">
                <div id="left">這是Left!</div>
                <div id="content">這是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>這是多行高度！<br></div>
               <div id="right">這是Right!</div>
            </div>
           <div id="foot">這是Foot!</div>
        </div>
    </body>
</html>

圣杯布局實現(xiàn)2：

與方法1的前三步相同，在第四步時采用了不同的解決方案：

步驟4-1

通過為Content和Right設(shè)置一個負(fù)的margin-left屬性：

      #content {
             background: #D6D6D6;  
             width: 100%;
             margin-left: -150px; 
      }
         #right {
             background: #77BBDD;  
             width: 200px;
             margin-left: -200px;
      }

效果如下：（此時Left被覆蓋）

Paste_Image.png

步驟4-2

設(shè)置Left和Right的positon分別調(diào)整其位置使左移和右移：

              #left {
                background: #E79F6D;
                width: 150px;
                position: relative;
                left: -150px;
            }
            #right {
                background: #77BBDD;  
                width: 200px;
                margin-left: -200px;
                position: relative;
                left: 200px;
            }

效果如下：

Paste_Image.png

步驟四完成，步驟五同方法1。
最終代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
        <title>圣杯布局1</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                text-Align: center;
            }
            #top {
                background: #666; 
                height: 60px;
            }
            #left, #content,#right{
                float:left;
                padding-bottom: 2000px;
                margin-bottom: -2000px;
            }
            #main{
                padding-left: 150px;
                padding-right: 200px;
                background-color: bisque;
                overflow: hidden;
            }
            #left {
                background: #E79F6D;
                width: 150px;
                position: relative;
                left: -150px;  
            }
            #content {
                background: #D6D6D6;  
                width: 100%;
                margin-left: -150px; 
            }
            #right {
                background: #77BBDD;  
                width: 200px;
                margin-left: -200px;
                position: relative;
                left: 200px;
            }
            #foot {
                background: #666; 
                height: 50px;
                clear: both;
            }
</style>      
    </head>
    <body>
        <div id="parents">
            <div id="top">這是Top!</div>
            <div id="main">
                <div id="left">這是Left!</div>
                <div id="content">這是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>這是多行高度！<br></div>
               <div id="right">這是Right!</div>
            </div>
           <div id="foot">這是Foot!</div>
        </div>
    </body>
</html>

圣杯布局實現(xiàn)3（先加載主列）：

效果如下：

4770448-f4aeb930e2732d89.png

最終代碼：

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>polandeme</title>
    <meta charset="utf-8">
    <style>
        body{
            color: aliceblue;
        }
        .main-wrap{
            margin-left: 190px;
            margin-right: 190px;
        }
        /*.grid-s5m0e5 { width:100%;}*/
        .col-main { 
            float:left; 
            width: 100%;
            min-height:30px; 
            background:#000; 
        }
        .col-sub { 
            float:left;
            margin-left: -100%;
            width:190px;
            min-height:30px; 
            background:#f00;     
        }
        .col-extra { 
            margin-left: -190px;
            float:left;
            width:190px;
            min-height:30px; 
            background:#00f;     
        }
    </style>
</head>
<body>
<div class="grid-s5m0e5">
    <div class="col-main">
        <div class="main-wrap">
            我是主列，出來吧！
        </div>
    </div>
    <div class="col-sub">我是子列</div>
    <div class="col-extra">我是附加列</div>
</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,109評論 1贊 92
  • 一、負(fù)邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別? 負(fù)邊距在讓元素產(chǎn)生偏移的時候其自身...
    dengpan閱讀 376評論 0贊 0
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 2,112評論 0贊 2
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,429評論 0贊 11
  • 記得以前去一個表哥家串門，表哥有個小兒子，上小學(xué)五六年級的樣子。我去了的時候正在打穿越火線，我看了一會兒，覺...
    無語對歡顏閱讀 292評論 0贊 1

友情鏈接更多精彩內(nèi)容