Ce que cet article vous apporte est un résumé des méthodes d'implémentation de la mise en page CSS à trois colonnes (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Pour le front end, la mise en page doit également être maîtrisée. Une bonne mise en page peut rendre la page plus belle. En ce qui concerne la mise en page, nous devons parler de mise en page CSS à trois colonnes. C'est une question souvent posée lors des entretiens préliminaires, et elle est considérée comme une question fondamentale. La disposition dite à trois colonnes fait généralement référence aux côtés gauche et droit fixes et au milieu adaptatif, ou au milieu fixe et aux côtés gauche et droit adaptatifs.
Correction des côtés gauche et droit adaptatifs du milieu
Paramètres de la structure HTML
Créer un nouvel élément parent, y compris trois éléments enfants : left, main, right (notez que main est écrit devant, de sorte que la partie du milieu sera chargée en premier lors du rendu de la page, et la partie du milieu sera chargée en premier pour les questions d'entretien)
paramètres de style
1. Définissez la hauteur de l'élément parent
2. Les trois éléments sont définis pour flotter
3. La partie principale centrale a une largeur fixe de 100 % : width : 100 %, et la largeur et la hauteur des côtés gauche et droit sont définies en fonction des exigences du produit
4. Définir la marge à gauche : -100 % ; définir la marge à droite à droite : -largeur de la boîte droite
5. Ensembles d'éléments parents padding-left : largeur de la boîte gauche ; padding-right : largeur de la boîte droite
6. Positionnement relatif des boîtes gauche et droite
<div class="container">
<div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
<div class="left f"></div>
<div class="right f"></div>
</div>
<style>
body {
min-width: 700px;
}
.container {
height: 300px;
padding: 0 200px 0 200px;
}
.f {
float: left;
}
.main {
width: 100%;
height: 300px;
background-color: cornflowerblue;
}
.left {
width: 200px;
height: 300px;
background-color: indianred;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 300px;
background-color: lightgreen;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>La probabilité que la mise en page soit affectée par des éléments internes et la destruction de la mise en page est faible, mais lorsque l'écran du navigateur est réduit dans une certaine mesure, le contenu des côtés gauche et droit tombera ou se chevauchera. La solution est d'ajouter une largeur minimale au corps (au moins supérieure à la somme des largeurs des côtés gauche et droit)
L'idée est cohérente avec le Disposition du Saint Graal, mais il existe quelques différences subtiles.
Paramètres de la structure HTML
Créez un nouvel élément parent, comprenant trois éléments enfants : left, main, right (notez que main est écrit devant, afin que le milieu soit chargé en premier lorsque le la page est rendue. Pour les questions d'entretien, chargez d'abord la partie centrale)
paramètres de style
1. Définissez la hauteur de l'élément parent
2. Définissez les trois éléments pour qu'ils flottent
3. La partie principale centrale a une largeur fixe de 100 % : largeur : 100 %, définissez la largeur et la hauteur sur les côtés gauche et droit en fonction des exigences du produit
4. Ajoutez une boîte intérieure à la partie principale dans le milieu pour placer le contenu (différent de la mise en page du Saint Graal)
5. Définissez la marge gauche à gauche : -100 % ; définissez la marge droite à droite : -largeur de la boîte droite
6. Ajoutez un nouveau boîte, intérieur, définir le remplissage ou la marge gauche et droite
<div class="container">
<div class="main f">
<div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
</div>
<div class="left f"></div>
<div class="right f"></div>
</div>
<style>
.container {
height: 300px;
}
.f {
float: left;
}
.main {
width: 100%;
height: 300px;
background-color: cornflowerblue;
}
.left {
width: 200px;
height: 300px;
background-color: indianred;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: lightgreen;
margin-left: -200px;
}
.inner {
padding: 0 200px 0 200px;
}
</style>Paramètres de la structure HTML
Créer trois nouveaux éléments : gauche, droite, principal (note , main est écrit à la fin)
paramètres de style de style
1. La case de gauche flotte à gauche et la case de droite flotte à droite
2. Définissez la valeur de marge ou de remplissage au milieu. part
<div class="left"></div>
<div class="right"></div>
<div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<style>
.main {
margin: 0 200px 0 200px;
background-color: red;
height: 200px;
}
.left {
float: left;
width: 200px;
background-color: blue;
height: 200px;
}
.right {
float: right;
width: 200px;
background-color: pink;
height: 200px;
}
</style>Paramètre de structure HTML
Créer un nouvel élément parent, comprenant trois éléments enfants : left, main, right (note, main est écrit au milieu)
paramètres de style
1. Définissez la largeur de l'élément parent à 100%, display: flex
2. Gauche et droite Puis définissez la largeur; et hauteur en fonction des exigences du produit
3. Réglez le flex dans la partie centrale : 1
<div class="container">
<div class="left"></div>
<div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<div class="right"></div>
</div>
<style>
.container {
width: 100%;
height: 200px;
display: flex;
}
.main {
flex: 1;
background-color: red;
height: 200px;
}
.left {
width: 200px;
background-color: blue;
height: 200px;
}
.right {
width: 200px;
background-color: pink;
height: 200px;
}
</style>Il existe d'autres méthodes d'écriture, je n'entrerai pas dans les détails ici, mais j'en énumérerai simplement quelques-unes ; les plus couramment utilisés et les situations qui peuvent être posées lors des entretiens. CSS3 possède également de nombreuses fonctionnalités intéressantes qui méritent d'être étudiées en profondeur pendant le travail et les études.
Les côtés gauche et droit fixes au milieu sont adaptatifs
Paramètres de la structure HTML
Créez un nouvel élément parent, comprenant trois éléments enfants : left, main, right (remarque, main est écrit au milieu)
paramètres de style
1. les côtés occupent chacun 50% de la largeur
2 , La marge négative gauche margin-left représente la moitié de la largeur du milieu p
3. La marge négative droite margin-right représente également la moitié de la largeur de le milieu p
<div class="container">
<div class="left"></div>
<div class="main">我是中间内容</div>
<div class="right"></div>
</div>
<style>
.main {
width: 100px;
text-align: center;
float: left;
background-color: lightgreen;
height: 300px;
}
.left {
height: 300px;
float: left;
width: 50%;
margin-left: -50px;
background-color: pink;
}
.right {
height: 300px;
float: right;
width: 50%;
margin-right: -50px;
background-color: cornflowerblue;
}
</style>Paramètres de structure HTML
Créer un nouvel élément parent, comprenant trois éléments enfants : left, main, right
Paramètres de style
1. Affichage des paramètres de l'élément parent : flex ; flex-direction: row
2. Définissez flex-grow : 1 à gauche et à droite et divisez l'espace restant. également
<div class="container">
<div class="left"></div>
<div class="main">我是中间内容</div>
<div class="right"></div>
</div>
<style>
.container {
display: flex;
flex-direction : row;
}
.main {
width: 200px;
height: 300px;
text-align: center;
background-color: lightgreen;
}
.left {
height: 300px;
flex-grow: 1;
background-color: pink;
}
.right {
height: 300px;
flex-grow: 1;
background-color: cornflowerblue;
}
</style>est utilisé pour calculer dynamiquement la valeur de longueur. A noter qu'un espace doit être réservé avant et après l'opérateur, par exemple : width: calc(100% - 50px).
Paramètres de structure HTML
Créer un nouvel élément parent, comprenant trois éléments enfants : left, main, right
paramètres de style de style
1. paramètres 100% largeur
2. Définir la largeur à gauche et à droite : calc(50%, - middle width/2)
<div class="container">
<div class="left"></div>
<div class="main">我是中间内容</div>
<div class="right"></div>
</div>
.container {
width: 100%;
height: 300px;
}
.f {
float: left;
}
.main {
width: 100px;
text-align: center;
background-color: lightgreen;
height: 300px;
}
.left {
height: 300px;
background-color: pink;
width: calc(50% - 50px); /*平分中间部分的宽度*/
}
.right {
height: 300px;
background-color: cornflowerblue;
width: calc(50% - 50px); /*平分中间部分的宽度*/
}La route est longue et longue, et si personne d'autre est intelligent, alors continuez à travailler dur. Croyez que le travail acharné peut compenser la faiblesse. Faites un petit progrès chaque jour et un jour vous ferez un grand pas en avant.
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!
tutoriel CSS3
Quelles sont les propriétés du dégradé CSS3 ?
Pourquoi ne puis-je pas accéder au navigateur Ethereum ?
Google Earth ne parvient pas à se connecter à la solution serveur
Les factures de téléphone de recharge Douyin peuvent-elles être remboursées ?
Comment changer les paramètres entre les systèmes doubles Huawei
Comment insérer des images en CSS
Python concernant l'utilisation du module
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
