Explication détaillée du schéma de mise en page du Saint Graal à trois colonnes de CSS-tutoriel CSS-php.cn

Explication détaillée du schéma de mise en page du Saint Graal à trois colonnes de CSS

高洛峰

Libérer： 2017-03-09 17:03:43

original

1745 Les gens l'ont consulté

La mise en page du Saint Graal a de beaux effets et a des exigences de compatibilité avec les navigateurs très faibles. Il s'agit d'une solution de mise en page à trois colonnes très puissante. Jetons ensuite un coup d'œil à l'analyse complète de la "mise en page du Saint Graal" à trois colonnes CSS. " solution :

La mise en page du Saint Graal est issue d'un article écrit par Matthew Levine en 2006. Sa structure DOM est la suivante :

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

Copier après la connexion

Processus explication
Ensuite, implémentons la mise en page du Saint Graal étape par étape

1. Faites d'abord flotter les colonnes principale, secondaire et supplémentaire respectivement, puis utilisez des marges négatives pour positionner la sous-colonne et colonne supplémentaire sur les côtés gauche et droit. Le code CSS à ce moment est le suivant :

.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);   
}

Copier après la connexion

2. Après avoir terminé l'étape précédente, les colonnes sous et supplémentaires ont atteint la position correcte, mais les colonnes sous et supplémentaires couvrir les deux côtés du main , pour ce problème, la solution de mise en page du Saint Graal consiste à ajouter un remplissage gauche et droit au conteneur afin que la colonne principale soit positionnée dans la bonne position.

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

Copier après la connexion

3. Après avoir terminé la deuxième étape, un nouveau problème est apparu : les colonnes sub et extra ont également été affectées par les marges intérieures gauche et droite du conteneur et leurs positions ont été déplacées. . Pour résoudre ce problème, Holy Grail Layout utilise le positionnement relatif pour ramener les sous-colonnes et les colonnes supplémentaires à leur position correcte. Le code nouvellement ajouté est le suivant :

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

Copier après la connexion

4. Lorsque le navigateur est réduit dans une certaine mesure, cette mise en page peut être détruite, ce qui peut être résolu en ajoutant le min- attribut width au corps. Le code CSS final de la mise en page du Saint Graal est le suivant :

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);   
}

Copier après la connexion

L'exemple complet

L'effet est le suivant :
Explication détaillée du schéma de mise en page du Saint Graal à trois colonnes de CSS

Le code CSS et DOM est le suivant :

<!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>

Copier après la connexion

Les avantages de la mise en page Holy Graal sont résumés comme suit :
1. Chargez d'abord la colonne de contenu principale.
2. Autoriser n'importe quelle colonne à être la plus haute.
3. Pas de p supplémentaire.
4. Très peu de hacks sont nécessaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!