Maison >interface Web >tutoriel CSS >Explication détaillée de la disposition CSS à trois colonnes
Explication détaillée de la disposition CSS à trois colonnes
- php中世界最好的语言original
- 2018-03-20 16:34:521393parcourir
Cette fois, je vais vous apporter une explication détaillée de la disposition en trois colonnes du CSS. Quelles sont les précautions pour la disposition en trois colonnes du CSS Voici un cas pratique, jetons un coup d'oeil. .
Cet article présente le schéma de mise en page CSS classique à trois colonnes. Partagez-le avec tout le monde et notez-le vous-même :
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, dessinez 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>
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
A ce moment, vous pouvez obtenir la répartition des colonnes de gauche et de droite :
Suivant , 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 cases fera toujours de la place pour cet élément et l'entourera.) Donc pour le moment, il vous suffit d'ajouter un p normal dans le conteneur conteneur, qui ignorera la gauche et la droite et remplira tout le conteneur. Juste De plus, la marge peut être gauche et droite pour s'écouler hors 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;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
Avantages : Simple
Inconvénients : La partie médiane est chargé en dernier, ce qui affecte lorsqu'il y a beaucoup de contenu Expérience
2 Les règles BFC
Les règles BFC (contexte de formatage de bloc) stipulent que BFC ne se chevauchera pas. é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;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
3. Disposition du Saint Graal
Le cœur de la disposition du Saint Graal est la gauche, le milieu. et les colonnes de droite sont toutes flottantes, puis ajustées par une marge négative.
La première étape consiste à jeter un œil à la mise en page 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>
<p class="container">
<p class="main"></p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
L'effet que vous voyez à ce moment est : les colonnes de gauche et de droite sont pressés 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;
}
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, ce n'est pas encore fait, essayons d'ajouter du texte au main :
<body> <p class="container"> <p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p> <p class="left"></p> <p class="right"></p> </p> </body>
Vous pouvez voir que le texte est supprimé et nous devons résoudre ce problème ensuite.
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;
}
Les résultats que vous voyez à ce moment sont. les colonnes de gauche, du milieu et de droite ont été réduites dans leur ensemble, 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;
}
Jusqu'à présent, vous avez terminé :
4. Disposition des ailes volantes doubles
Les deux premières étapes du double la disposition des ailes volantes est la même que la disposition du Saint Graal, mais la solution au problème du blocage du contenu partiel dans la colonne du milieu est différente :
Étant donné que le contenu de la partie principale sera bloqué, ajoutez un autre contenu à l'intérieur du main et définissez sa marge pour éviter l'occlusion, le problème peut être résolu :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
float: left;
width: 100%;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.main::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<p class="main">
<p class="content"></p>
</p>
<p class="left"></p>
<p class="right"></p>
</body>
</html>
La seule chose à noter est que vous devez ajouter un élément après main pour effacer le flotteur.
5. Mise en page Flex
La mise en page Flex est la tendance Il est également très simple d'utiliser flex pour mettre en œuvre une mise en page à trois colonnes, mais vous devez y prêter attention. compatibilité des navigateurs :
<style type="text/css">
.container {
display: flex;
flex-direction: row;
}
.middle {
height: 200px;
background-color: red;
flex-grow: 1;
}
.left {
height: 200px;
order: -1;
margin-right: 20px;
background-color: yellow;
flex: 0 1 200px;
}
.right {
height: 200px;
margin-left: 20px;
background-color: green;
flex: 0 1 200px;
}
</style>
</head>
<body>
<p class="container">
<p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
Il y a quelques points à noter :
main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1
flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果
6. 绝对定位
绝对定位的方式也比较简单，而且可以优先加载主体：
<style type="text/css">
.container {
}
.middle {
position: absolute;
left: 200px;
right: 200px;
height: 300px;
background-color: yellow;
}
.left {
position: absolute;
left: 0px;
width: 200px;
height: 300px;
background-color: red;
}
.right {
position: absolute;
right: 0px;
width: 200px;
background-color: green;
height: 300px;
}
</style>
</head>
<body>
<p class="container">
<p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
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!