En CSS, il existe deux manières d'implémenter la disposition des colonnes. La première méthode consiste à utiliser le positionnement absolu (positionnement absolu) parmi les quatre options de positionnement CSS (absolu, statique, relatif et fixe), qui permet de supprimer un élément du document de sa position d'origine et de le repositionner n'importe où. La seconde consiste à utiliser le concept float en CSS.
Le positionnement absolu ou flottant peut être utilisé pour obtenir des effets de colonne. Les deux peuvent être utilisés indépendamment ou combinés pour se compléter.
1. Positionnement absolu L'avantage du positionnement absolu est que nous pouvons contrôler avec précision la position de n'importe quel élément - il n'y a pas de conjecture ni de chance. Étant donné qu'un élément positionné de manière absolue est complètement supprimé du flux de documents habituel sans laisser de trace, il n'a aucun impact sur les autres éléments.
Essayons donc comment implémenter la disposition suivante en utilisant le positionnement absolu.
Il s’agit d’une mise en page à trois colonnes et centrée. Parmi elles, la colonne A est la colonne de contenu principale et les colonnes B et C sont des colonnes secondaires. Tout d'abord, nous ne pouvons pas utiliser directement le positionnement absolu pour positionner les trois colonnes A, B et C en position centrale, car la résolution du moniteur de chaque personne est différente. L'effet de centrage du positionnement sur un moniteur avec une résolution de 1024X768 sera. ne fonctionne pas à d'autres résolutions. L'effet observé sur un moniteur haute vitesse ne sera certainement pas centré. Alors, comment résoudre ce problème ?
Heureusement, il existe une fonctionnalité extrêmement utile dans le modèle de positionnement absolu, à savoir : si le conteneur d'un élément positionné de manière absolue a également été positionné, alors les valeurs supérieure et gauche spécifiées par l'élément ne seront pas basées sur l'élément racine. html du document (c'est également le coin supérieur gauche de la fenêtre du navigateur), mais le décalage sera calculé en fonction du coin supérieur gauche de son conteneur. En d’autres termes, c’est-à-dire : le conteneur positionné servira de point de départ pour le positionnement absolu de tous les éléments qu’il contient.
Par conséquent, en utilisant cette fonctionnalité, nous ajoutons un conteneur D en dehors des colonnes A, B et C, comme indiqué ci-dessous :
Ensuite, nous centrons le conteneur D et lui ajoutons un attribut : position:relative. De cette façon, nous utilisons le positionnement absolu pour positionner les valeurs supérieure et gauche de A, B et C. Les positions de A, B. , et C sera basé sur le conteneur D. La position du coin supérieur gauche est calculée, de sorte que l'effet de centrage souhaité sur trois colonnes puisse être obtenu.
Cependant, notre mise en page couramment utilisée n'est pas si simple. En plus de trois colonnes, nous avons également besoin d'un en-tête et d'un pied de page, comme indiqué ci-dessous :
À ce stade, l'utilisation d'une mise en page en position absolue ne fonctionnera pas, car l'élément en position absolue sera complètement supprimé du flux de documents. À ce stade, le pied de page sera à côté de l'en-tête et affiché sous l'en-tête.
Si nous devons utiliser le positionnement absolu, nous devons connaître à l’avance la hauteur de chacune des trois colonnes, puis positionner le pied de page en fonction de la colonne la plus haute. Si la longueur du texte dans une colonne ne peut pas être déterminée, en plus d'utiliser JavaScript, nous ne pouvons qu'abandonner l'idée d'un positionnement absolu et investir plutôt dans l'adoption d'une mise en page flottante.
2. Flottant
L'intention initiale du flottement est de faire flotter l'image insérée dans l'article vers la gauche ou la droite, de sorte que le texte sous l'image s'enroule automatiquement autour d'elle, afin qu'il n'y ait pas un grand espace vide à gauche ou à droite. côté droit de l'image.
Bien que la syntaxe du flottant soit simple, elle n'est pas si facile à maîtriser. Donnons un exemple de la façon d'utiliser le flottant pour la mise en page. De même, nous allons implémenter une mise en page à trois colonnes avec un pied de page. Comme indiqué ci-dessous :
Comment utiliser le float pour obtenir un tel effet ? En fait, c'est très simple :
1. Définissez la largeur de E et le centre E.
2. Définissez la largeur de A, B et C, et les flotteurs A, B et C respectivement vers la gauche.
3. Définissez le clair. attribut pour le pied de page. Ce
qu'il faut expliquer, c'est que la mise en page flottante suit toujours le flux normal du document, donc par rapport au positionnement absolu, la position de la déclaration de l'élément dans le fichier source HTML est particulièrement importante lors du positionnement flottant. Bien entendu, le moyen le plus simple de résoudre ce problème consiste à échanger l'ordre de déclaration de la colonne de gauche et de la colonne de droite dans le fichier source. Il existe également des moyens d'obtenir la même disposition sans échanger l'ordre des colonnes. l'utilisation d'une comparaison Manière obscure d'utiliser des valeurs de marge négatives. Dans des circonstances normales, les utilisateurs choisiront très probablement d'inverser l'ordre des déclarations dans les colonnes de gauche et du milieu du fichier source.