Ausführliche Erläuterung des dreispaltigen Holy-Grail-Layoutschemas von CSS-CSS-Tutorial-php.cn

Ausführliche Erläuterung des dreispaltigen Holy-Grail-Layoutschemas von CSS

高洛峰

Freigeben： 2017-03-09 17:03:43

Original

1779 Leute haben es durchsucht

Das Holy Grail-Layout hat wunderschöne Effekte und stellt nur sehr geringe Anforderungen an die Browserkompatibilität. Es handelt sich um eine sehr leistungsstarke dreispaltige Seitenlayoutlösung. Schauen wir uns als Nächstes die vollständige Analyse des dreispaltigen CSS-Layouts an " Lösung:

Das Holy Grail-Layout stammt aus einem Artikel von Matthew Levine aus dem Jahr 2006. Seine DOM-Struktur ist wie folgt:

<p class="container">
    <p class="main"></p>
 <p class="sub"></p>
 <p class="extra"></p>
</p>

Nach dem Login kopieren

Prozess Erklärung
Als nächstes implementieren wir das Holy Grail-Layout Schritt für Schritt.

1 Floaten Sie zunächst die Haupt-, Unter- und Zusatzspalte und verwenden Sie dann negative Ränder, um die Unterspalte zu positionieren zusätzliche Spalte auf der linken und rechten Seite. Der CSS-Code lautet zu diesem Zeitpunkt wie folgt:

.main {   
 float: left;   
 width: 100%;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sub {   
 float: left;   
 width: 200px;   
 height: 300px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}   
.extra {   
 float: left;   
 width: 180px;   
 height: 300px;   
 margin-left: -180px;   
 background-color: rgba(0, 0, 255, .5);   
}

Nach dem Login kopieren

2. Nach Abschluss des vorherigen Schritts haben die Unter- und Zusatzspalten die richtige Position erreicht, aber die Unter- und Zusatzspalten Decken Sie beide Seiten der Hauptspalte ab. Für dieses Problem besteht die Lösung des Holy Grail-Layouts darin, dem Container eine linke und rechte Polsterung hinzuzufügen, damit die Hauptspalte an der richtigen Position positioniert wird.

.container {   
 padding-left: 210px;   
 padding-right: 190px;   
}

Nach dem Login kopieren

3. Nach Abschluss des zweiten Schritts trat ein neues Problem auf: Die Unter- und Extraspalten waren ebenfalls vom linken und rechten Innenrand des Containers betroffen und ihre Positionen wurden verschoben . Um dieses Problem zu lösen, verwendet Holy Grail Layout eine relative Positionierung, um die Unter- und Zusatzspalten wieder an die richtige Position zu bringen. Der neu hinzugefügte Code lautet wie folgt:

.sub {   
 position: relative;   
 left: -210px;   
}   
.extra {   
 position: relative;   
 rightright: -190px;   
}

Nach dem Login kopieren

4. Wenn der Browser auf ein bestimmtes Maß reduziert wird, kann dieses Layout zerstört werden, was durch Hinzufügen des Min- gelöst werden kann. width-Attribut für den Körper. Der endgültige CSS-Code für das Holy Grail-Layout lautet wie folgt:

body {   
 min-width: 600px; /* 2*sub + extra */
}   
.container {   
 padding-left: 210px;   
 padding-right: 190px;   
}   
.main {   
 float: left;   
 width: 100%;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sub {   
 position: relative;   
 left: -210px;   
 float: left;   
 width: 200px;   
 height: 300px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}   
.extra {   
 position: relative;   
 rightright: -190px;   
 float: left;   
 width: 180px;   
 height: 300px;   
 margin-left: -180px;   
 background-color: rgba(0, 0, 255, .5);   
}

Nach dem Login kopieren

Das vollständige Beispiel

Der Effekt ist wie folgt:
Ausführliche Erläuterung des dreispaltigen Holy-Grail-Layoutschemas von CSS

CSS- und DOM-Code lauten wie folgt:

<!DOCTYPE html>   
<html>   
<head>   
    <meta charset="utf-8">   
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
    <title>圣杯布局</title>   

    <style type="text/css">   
    body {background-color: #ffffff; font-size:14px;}   
    #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}   
    .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}   
    .main {background-color: #03a9f4; color:#ffffff;}   
    .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}   
    p {margin:0; padding:20px; text-align: center;}   


    /* 左侧栏固定宽度，右侧自适应 */
    .bd-lft {   
        zoom:1;   
        overflow:hidden;   
        padding-left:210px;   
    }   
    .bd-lft .aside {   
        float:left;   
        width:200px;   
        margin-left:-100%; /*= -100%*/

        position:relative;   
        left:-210px; /* = -parantNode.paddingLeft */
        _left: 0; /*IE6 hack*/
    }   
    .bd-lft .main {   
        float:left;   
        width:100%;   
    }   


    /* 右侧栏固定宽度，左侧自适应 */
    .bd-rgt {   
        zoom:1;   
        overflow:hidden;   
        padding-right:210px;   
    }   
    .bd-rgt .aside {   
        float:left;   
        width:200px;   
        margin-left:-200px; /* = -this.width */

        position:relative;   
        rightright:-210px; /* = -parantNode.paddingRight */
    }   
    .bd-rgt .main {   
        float:left;   
        width:100%;   
    }   


    /* 左中右 三栏自适应 */
    .bd-3-lr {   
        zoom:1;   
        overflow:hidden;   
        padding-left:210px;   
        padding-right:210px;   
    }   
    .bd-3-lr .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-lr .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -210px;   
        _left: 210px; /*IE6 hack*/
    }   
    .bd-3-lr .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -210px;   
    }   

    /* 都在左边，右侧自适应 */
    .bd-3-ll {   
        zoom:1;   
        overflow:hidden;   
        padding-left:420px;   
    }   
    .bd-3-ll .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-ll .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -420px;   
        _left: 0px; /*IE6 hack*/
    }   
    .bd-3-ll .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -210px;   
        _left: 210px; /*IE6 hack*/
    }   

    /* 都在右边，左侧自适应 */
    .bd-3-rr {   
        zoom:1;   
        overflow:hidden;   
        padding-right:420px;   
    }   
    .bd-3-rr .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-rr .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -210px;   
    }   
    .bd-3-rr .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -420px;   
    }   


    </style>   

</head>   
<body>   

    <p id="hd">头部</p>   

    <p class="bd-lft">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside">   
            <p>侧边栏固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-rgt">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside">   
            <p>侧边栏固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-lr">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-ll">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-rr">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p id="ft">底部</p>   

</body>   
</html>

Nach dem Login kopieren

Die Vorteile des Holy Grail-Layouts sind wie folgt zusammengefasst:
1. Laden Sie zuerst die Hauptinhaltsspalte.
2. Lassen Sie zu, dass jede Spalte die höchste ist.
3. Kein Extrap.
4. Es sind nur sehr wenige Hacks erforderlich.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des dreispaltigen Holy-Grail-Layoutschemas von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!