Demi-disposition gauche et droite - de nombreuses façons différentes

Il y a des années, CSS-Tricks a exploré diverses méthodes pour créer une disposition à deux colonnes. Cet article mis à jour fournit un aperçu complet de ces techniques.

Disons que vous avez besoin d'une disposition divisée en deux colonnes de hauteur égal dans un conteneur. De nombreuses approches CSS y parviennent, et nous en examinerons plusieurs.

MISE À JOUR (25 octobre 2024): Cet article comprend désormais un exemple utilisant le positionnement de l'ancrage CSS.

Technique de gradient de fond

Une approche visuelle simple utilise des gradients de fond. Définissez la moitié de l'arrière-plan avec une couleur et l'autre moitié avec une couleur différente. Un arrêt de couleur zéro espace crée une division tranchante:

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

Cela fonctionne avec un seul conteneur, mais nécessite des flotteurs ou d'autres méthodes de mise en page si le contenu doit remplir les deux côtés.

Méthode de positionnement absolu

Alternativement, utilisez deux conteneurs au sein d'un parent, positionnez-les absolument et divisez l'espace à l'aide de pourcentages. Cela permet un contenu indépendant pour chaque colonne. Cependant, le parent a besoin d'une hauteur fixe, ce qui peut être problématique avec un contenu dynamique. Le positionnement absolu supprime également les éléments du flux de documents, affectant potentiellement les autres contenus.

(fausses) tables approchent

Bien que les tables soient obsolètes pour la mise en page (et pose des problèmes d'accessibilité), display: table-cell; offre une solution pratique. Le conteneur parent devient un tableau et les conteneurs enfants deviennent des cellules, toutes manipulées dans CSS. Cette méthode est facilement adaptable à différentes tailles d'écran en modifiant les propriétés d'affichage aux points d'arrêt. Il bénéficie d'un large support de navigateur, datant de IE8.

en utilisant des flotteurs

Les flotteurs offrent une autre option, en évitant les complications du positionnement absolu. Les paramètres de hauteur explicites garantissent des hauteurs de colonne, bien que les flotteurs ne fournissent pas intrinsèquement cette fonctionnalité. Des gradients de fond ou d'autres techniques peuvent créer l'illusion d'une hauteur égale. N'oubliez pas d'effacer les flotteurs sur le parent pour maintenir le flux de documents approprié.

Méthode de blocage en ligne

display: inline-block; offre une alternative plus propre aux flotteurs, en évitant la nécessité de compenser. Cependant, assurez-vous qu'aucun espace ou rupture de ligne n'existe entre les éléments HTML pour les colonnes, pour empêcher l'espacement indésirable. Encore une fois, les paramètres de hauteur explicites sont nécessaires pour les hauteurs de colonne égales.

Solution flexible

Flexbox fournit une solution élégante, bien que le support soit limité à IE10 et supérieur. Le conteneur parent devient un Flexbox et les conteneurs enfants partagent automatiquement l'espace de manière égale. Le réglage flex: 1; sur les conteneurs enfants assure une distribution égale. Cette méthode gère efficacement le centrage vertical et horizontal.

Disposition de la grille

Pour les utilisateurs avancés, la disposition de la grille CSS combine la flexibilité de Flexbox et l'approche de la table. Définissez un conteneur, puis divisez-le en colonnes et cellules qui peuvent être remplies d'éléments enfants.

Position d'ancrage CSS (Nouveau!)

Le positionnement de l'ancrage CSS, une caractéristique plus récente (2024), permet de lier des éléments non apparentés. Un élément "ancre" est défini et un élément "cible" y est épinglé. Cela offre un contrôle précis sur le positionnement:

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

L'abondance des techniques CSS met en évidence sa polyvalence.

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!