Exemples de quatre méthodes pour implémenter une mise en page à trois colonnes avec CSS

Avant-propos

En fait, qu'il s'agisse d'une mise en page à trois colonnes ou d'une mise en page à deux colonnes, nous l'utilisons souvent dans nos projets quotidiens. vous ne savez pas ce que sont les trois colonnes. Qu'est-ce que la disposition à deux colonnes mais elle est déjà utilisée ? Peut-être connaissez-vous une ou deux méthodes de disposition à trois colonnes, mais dans le fonctionnement réel, vous ne vous fierez qu'à cette seule méthode ? . Cet article présente en détail la disposition à trois colonnes Quatre méthodes et présente ses scénarios d'utilisation.

La mise en page dite à trois colonnes fait référence à une méthode de mise en page dans laquelle la page est divisée en trois parties : gauche, milieu et droite, puis la partie centrale est adaptée.

1. Méthode de positionnement absolu

Le code HTML est le suivant :

<p class="left">Left</p>
<p class="main">Main</p>
<p class="right">Right</p>

Le code CSS est le suivant :

//简单的进行CSS reset
body,html{
    height:100%;
    padding: 0px;
    margin:0px;
}
//左右绝对定位
.left,.right{
    position: absolute;
    top:0px;
    background: red;
    height:100%;
}
.left{
    left:0;
    width:100px;
}
.right{
    right:0px;
    width:200px;
}
//中间使用margin空出左右元素所占据的空间
.main{
    margin:0px 200px 0px 100px;
    height:100%;
    background: blue;
}

Cette méthode présente un inconvénient évident, c'est-à-dire , si la colonne du milieu contient une limite de largeur minimale ou des éléments internes avec une largeur. Lorsque la largeur du navigateur est petite dans une certaine mesure, un chevauchement des couches se produira.

2. Mise en page du Saint Graal

Le code HTML est le suivant :

//注意元素次序
<p class="main">Main</p>
<p class="left">Left</p>
<p class="right">Right</p>

Le code CSS est le suivant :

//习惯性的CSS reset
body,html{
    height:100%;
    padding: 0;
    margin: 0
}
//父元素body空出左右栏位
body {
    padding-left: 100px;
    padding-right: 200px;
}
//左边元素更改
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
    height: 100%;
}
//中间部分
.main {
    background: blue;
    width: 100%;
    height: 100%;
    float: left;
}
//右边元素定义
.right {
    background: red;
    width: 200px;
    height: 100%;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}

L'explication pertinente est la suivante :

(1) La partie centrale doit changer en fonction du changement de largeur du navigateur, donc 100 % est utilisé ici, la gauche, le milieu et la droite sont définis pour flotter. la gauche. Parce que la partie centrale est à 100%, les calques gauche et droit n'ont aucune position

(2) Après avoir réduit la marge gauche de 100, j'ai constaté que la gauche montait. c'était tellement négatif qu'il n'y avait pas de place pour la fenêtre, je ne pouvais que la déplacer vers le haut

(3) Appuyez sur Non. Dans la deuxième étape de cette méthode, on peut conclure qu'il suffit de pour déplacer la largeur de la fenêtre pour atteindre la position la plus à gauche. Utilisez des marges négatives pour positionner les colonnes de gauche et de droite

(4) Mais parce que les colonnes de gauche et de droite sont bloquées. Pour la partie médiane, la Une méthode de positionnement relatif est utilisée, chacun se déplaçant par rapport à lui-même, et le résultat final est obtenu

3. Disposition des ailes volantes doubles
.

Le code HTML est le suivant :

<p class="main">
    <p class="inner">
        Main
    </p>
</p>
<p class="left">Left</p>
<p class="right">Right</p>

Le code CSS est le suivant :

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
body {
    /*padding-left:100px;*/
    /*padding-right:200px;*/
}
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    height: 100%;
    /*position: relative;*/
    /*left:-100px;*/
}
.main {
    background: blue;
    width: 100%;
    float: left;
    height: 100%;
}
.right {
    background: red;
    width: 200px;
    float: left;
    margin-left: -200px;
    height: 100%;
    /*position:relative;*/
    /*right:-200px;*/
}
//新增inner元素
.inner {
    margin-left: 100px;
    margin-right: 200px;
}

La mise en page du Saint Graal semble en fait compliquée et peu maintenable à un stade ultérieur. Après des discussions avec Taobao UED, une nouvelle méthode de mise en page est apparue, à savoir la mise en page à double aile volante. est comme ci-dessus. L'ajout d'un p supplémentaire élimine le besoin d'une disposition relative et utilise uniquement des marges flottantes et négatives. Des différences par rapport à la mise en page du Saint Graal ont été notées.

4. Flottant

Le code HTML est le suivant :

//注意元素次序
<p class="left">Left</p>
<p class="right">Right</p>
<p class="main">Main</p>

Le code CSS est le suivant :

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
//左栏左浮动
.left {
    background: red;
    width: 100px;
    float: left;
    height: 100%;
}
//中间自适应
.main {
    background: blue;
    height: 100%;
    margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

De cette façon, le code est suffisamment concis et efficace, et facile pour comprendre

Pour plus d'exemples de quatre méthodes pour implémenter une mise en page à trois colonnes avec CSS, veuillez faire attention au site Web PHP chinois !