Cette fois, je vais vous montrer comment implémenter la disposition classique à trois colonnes de CSS. Quelles sont les précautions pour implémenter la disposition classique à trois colonnes de CSS. Voici des cas pratiques, prenons un. regarder.
Cet article présente le schéma de mise en page CSS classique à trois colonnes, partagez-le avec tout le monde et prenez note pour vous-même, comme suit :
La mise en page à trois colonnes, comme son nom l'indique, est fixe des deux côtés et adaptatif au milieu. La disposition à trois colonnes est très courante dans le développement
1. Disposition flottante
La disposition à trois colonnes la plus simple consiste à utiliser float pour la mise en page. Tout d’abord, dessinons les colonnes de gauche et de droite :
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>Copier après la connexion
Ensuite, voyons comment gérer la colonne du milieu. Nous savons que pour les éléments float, ils se détacheront du flux de documents et que les autres boîtes ignoreront cet élément. (Mais le texte dans les autres zones fera toujours de la place pour cet élément et l'entourera.) Donc, pour le moment, il vous suffit d'ajouter un div normal dans le conteneur conteneur, qui ignorera la gauche et la droite et remplira tout le conteneur. De plus, la marge peut être gauche et droite pour sortir de l'espace :
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
margin-left: 120px;
margin-right: 120px;
}
.container {
border: 1px solid black;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>Copier après la connexion
Avantages : Simple
Inconvénients : La partie médiane est chargée en dernier, ce qui affecte l'expérience lorsque il y a beaucoup de contenu
2. Les règles BFC
Les règles BFC (Block Formatting Context) stipulent que BFC ne chevauchera pas les éléments flottants. Donc, si vous définissez l'élément principal comme élément BFC :
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>Copier après la connexion
3. Disposition du Saint Graal
Le cœur de la disposition du Saint Graal est que les colonnes de gauche, du milieu et de droite sont toutes. flottant à travers float. Puis ajustez-le avec une marge négative.
La première étape consiste à jeter un œil à la disposition de base
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>Copier après la connexion
L'effet que vous voyez à ce moment est le suivant : les colonnes de gauche et de droite sont comprimées dans la deuxième ligne. C'est parce que la largeur de la main est de 100 %. Ensuite, nous mettons la gauche, le centre et la droite sur une seule ligne en ajustant les marges des colonnes de gauche et de droite :
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
}Copier après la connexion
La deuxième étape consiste à définir la marge gauche de gauche à -100 % . Ceci La colonne de gauche se déplacera au début de la première ligne. Fixez ensuite la marge gauche de droite à la valeur négative de sa largeur : -100px, et la colonne de droite sera également déplacée sur la même ligne que les colonnes de gauche et du milieu :
Cependant, nous n'avons pas terminé pourtant, essayons d'ajouter du texte au main :
<body>
<div class="container">
<div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>Copier après la connexion
Vous pouvez voir que le texte est supprimé et nous devons ensuite résoudre ce problème.
La troisième étape consiste à donner un remplissage au conteneur. Le remplissage doit être exactement égal à la largeur des colonnes de gauche et de droite :
.container {
padding-left: 100px;
padding-right: 100px;
}Copier après la connexion
Les résultats que vous voyez sur. cette fois sont à gauche, au milieu, les trois colonnes de droite ont toutes rétréci, mais le texte est toujours supprimé.
La quatrième étape consiste à ajouter une disposition relative aux colonnes de gauche et de droite, puis à les déplacer vers l'extérieur en définissant les valeurs de gauche et de droite :
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
position: relative;
left: -100px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
position: relative;
right: -100px;
background-color: yellow;
}Copier après la connexion
Ça y est, vous avez terminé :
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment créer un effet d'animation de cercle en html5
En h5, la page mobile doit être zoomed Comment implémenter
Comment utiliser H5 Canvas pour implémenter un graphique dynamique 3D
Comment utiliser la distribution FileReader de H5 pour lire des fichiers et son introduction à la Méthode
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
