Exemples d'implémentation CSS de diverses dispositions de colonnes sur la page

Cet article présente principalement des exemples de méthodes pour implémenter une mise en page à une colonne, une mise en page à deux colonnes et une mise en page à trois colonnes à l'aide de CSS, y compris des exemples de largeur et de hauteur adaptatives. Les amis dans le besoin peuvent se référer à ce qui suit :

<.>

1. Mise en page à une colonne (également appelée mise en page à une seule colonne) La mise en page à une colonne nécessite la maîtrise de 3 points de connaissances : le flux de documents standard, qui comprend des éléments de niveau bloc et des éléments de niveau ligne. , ainsi que les attributs de marge, pour ainsi dire. Le code clé pour implémenter une disposition de colonne est implémenté par l'attribut margin. Le centrage horizontal est obtenu en définissant margin: 0 auto;. à la largeur du navigateur. Pour définir la marge, vous devez d'abord disposer d'un modèle de boîte, tel que le div ici, puis définir sa longueur et sa largeur sur une taille fixe pour obtenir le centrage.

<style type="text/css">
    body{margin:0;padding:0;}
    .head{heigth:200px;background:blue;}
    .main{height:500px;width:800p;margin:0 auto;}
    .footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2. Disposition à deux colonnes (deux colonnes adaptatives) Flottant :
Les éléments au niveau du bloc sont disposés ligne par ligne et deux blocs doivent être Lorsque les éléments horizontaux sont disposés côte à côte, vous devez utiliser la disposition flottante float en CSS. Float a trois valeurs d'attribut,
flottant gauche-gauche, flottant droite-droite, aucun-non flottant une fois l'attribut float défini. , les éléments correspondront Déplacez-le vers la gauche ou la droite jusqu'à ce qu'il touche le bord du conteneur
Lorsque l'élément n'a pas de contenu mais que l'attribut flottant est défini, la largeur de l'élément change avec le changement du contenu.
La méthode courante pour effacer les flotteurs est la suivante : clear : les deux ; (défini pour les éléments qui doivent être effacés). Si vous savez clairement quel type de flotteur est défini, vous pouvez également effacer : droite/gauche. En général, utilisez les deux. pour s'assurer que le flotteur est clair ; il existe une autre façon d'effacer les flotteurs, width:100%;overflow:hidden;

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:20%;height:500px;background:blue;float:left;}
    .right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="right"> This is right !</div>
</div>

Après avoir ajouté le div parent, les blocs droit et gauche sont limités au parent block, La largeur du bloc parent est fixe, donc la largeur des blocs gauche et droit est également fixe. Cependant, si la largeur du bloc parent change, les blocs gauche et droit changeront également en conséquence, et le rapport est toujours. 2:8. Ceci est corrigé.

3. Disposition à trois colonnes la position peut définir 4 valeurs d'attribut, à savoir : statique (positionnement statique), relative (positionnement relatif), absolue (positionnement absolu), fixe ( Positionnement fixe)
Pour l'adaptation de la disposition à trois colonnes, changez simplement la proportion dans la disposition à deux colonnes ci-dessus à 33,33 %. Ensuite, par analogie, l'adaptation de la disposition à quatre colonnes peut également utiliser la même méthode pour ajuster la répartition des proportions, afin que Obtenez la mise en page souhaitée.

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:33.33%;height:500px;background:blue;float:left;}
    .middle{width:33.33%;height:500px;background:black;float:left;}
    .right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

Une autre situation est que les largeurs des blocs gauche et droit sont fixées à 200px et 300px respectivement, tandis que celui du milieu est adaptatif. Dans ce cas, cela ne peut pas être réalisé via float. À ce stade, nous devons positionner absolument les blocs gauche et droit, puis définir la marge du bloc central pour répondre aux exigences. Si vous souhaitez que les pièces du milieu, de gauche et de droite ne s'emboîtent pas étroitement, vous pouvez augmenter les pixels de manière appropriée lors du réglage de la marge (haut, droite, bas, gauche). La méthode de mise en œuvre est la suivante :

Note left:0;top:0;right:0;top:0; Ces paramètres sont nécessaires s'ils ne sont pas ajoutés, des problèmes surviendront

Sur la page Web Dans la conception, nous mélangeons principalement les méthodes de mise en page ci-dessus, comme l'insertion d'une mise en page à deux ou trois colonnes dans le bloc principal d'une mise en page à une colonne. Le code est fondamentalement le même que ci-dessus

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
    .middle{height:500px;background:black;margin:0 300px 0 200px;}
    .right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

Utiliser le principe de BFC pour implémenter

L'une des règles de BFC est que la zone BFC ne chevauchera pas la boîte flottante, nous pouvons donc l'utiliser pour implémenter un modèle à 3 colonnes mise en page. Le code CSS est le suivant

Le code html est le suivant

.left {   
  float: left;   
  margin-right: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.rightright {   
  float: rightright;   
  margin-left: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  overflow: hidden;   
}

Disposition à double aile volante

<div class="left"></div>  
<div class="right"></div>  
<div class="main"></div>

Ceci Le schéma de mise en page a été proposé pour la première fois par Taobao , principalement pour que la colonne principale puisse être chargée en premier. Principe de mise en œuvre : (1) Ajoutez un wrap à l'extérieur de la colonne principale, enveloppez la colonne principale et faites flotter les deux sous-colonnes vers la gauche.
(2) Définissez la largeur d'enroulement de la colonne principale à 100 % et définissez la marge gauche de la sous-colonne sur une valeur négative afin que les sous-colonnes puissent être disposées sur les côtés gauche et droit.
(3) En effet, les marges gauche et droite de la colonne principale sont un peu plus grandes que la largeur des colonnes de gauche et de droite. Vous pouvez définir l'écart entre la colonne principale et la sous-colonne.

Le code CSS est le suivant

Le code HTML est le suivant

.wrap {   
  width: 100%;   
}   
.wrap::after {   
  display: block;   
  content: '';   
  font-size: 0;   
  height: 0;   
  clear: both;   
  zoom: 1;   
}   
.main-content {   
  float: left;   
  width: 100%;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  margin-left: 110px;   
  margin-right: 110px;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100%;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
}

Mise en page du Saint Graal

<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>

Saint Graal La mise en page est structurellement plus simple. Vous pouvez également laisser la colonne principale se charger en premier. Principe de mise en œuvre : (1) Ajoutez une boîte d'emballage, définissez la valeur padding-leftpadding-right et définissez la largeur d'un espace plus grande que la largeur de la sous-colonne.
(2) La colonne principale et la sous-colonne sont définies sur float : left, la marge gauche de la sous-colonne de gauche est définie sur -100 % et définie sur position : relative left : -110px to place ; la sous-colonne de gauche vers la gauche. Il en va de même pour la colonne de droite.
(3) Réglez simplement la largeur de la colonne principale à 100 %. Ne réglez pas la largeur de la boîte à colis à 100%, adaptez-la simplement.

le code CSS est le suivant

le code html est le suivant

.wrapper {   
  padding-left: 110px;   
  padding-right: 110px;   
  overflow: hidden;   
}   
.main {   
  float: left;   
  width: 100%;   
  height: 100px;   
  background-color: #ccc;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  margin-left: -100%;   
  position: relative;   
  left: -110px;   
  _left: 0;   
  background-color: orange;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
  position: relative;   
  rightright: -110px;   
}

<div class="wrapper">  
  <div class="main"></div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>