CSS dispose de plusieurs façons d'implémenter une mise en page à trois colonnes

Cette fois, je vais vous présenter plusieurs façons d'implémenter une mise en page à trois colonnes avec CSS. Quelles sont les précautions pour implémenter une mise en page à trois colonnes avec CSS. Voici des cas pratiques, jetons un coup d'œil ? .

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 notre quotidien Projets. Peut-être que vous ne savez pas Qu'est-ce que la disposition à trois colonnes ? Qu'est-ce que la disposition à deux colonnes ? s'appuyer sur cette seule méthode.Cet article présente spécifiquement les trois colonnes quatre méthodes de disposition des colonnes 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>

Code CSS Comme suit :

//简单的进行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 que si la colonne du milieu contient une limite de largeur minimale, ou un élément interne avec une largeur, lorsque la largeur du navigateur est suffisamment petite, 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;
}

Les explications pertinentes sont les suivantes :

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

(2) Après moins 100 de la marge du. couche gauche, j'ai trouvé que la gauche a augmenté, car elle est tellement négative qu'il n'y a plus d'espace lorsque la fenêtre sort, donc je ne peux la déplacer que vers le haut

(3) Selon la deuxième étape, on peut en conclure qu'il suffit de déplacer la largeur de la fenêtre vers l'extrême gauche. Utilisez des marges négatives pour positionner les colonnes de gauche et de droite

(4 ) Mais comme les colonnes de gauche et de droite bloquent la partie médiane. , la méthode de positionnement relatif est utilisée, chacun s'éloignant par rapport à lui-même, et le résultat final est obtenu

3 Disposition à double aile volante

<.>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 n'est pas très maintenable à l'avenir. Après des discussions avec Taobao UED, une nouvelle méthode de disposition est apparue : la disposition à double aile volante. Le code est le même que 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%;
}

Cette méthode de code est suffisamment concise et efficace, et facile à comprendre

Résumé

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser HTML+CSS pour implémenter le menu déroulant

Utiliser CSS3 pour implémenter une bordure carrée lumineuse
CSS pour faire pivoter l'icône lorsque vous déplacez la souris vers le haut

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!