Comment réorganiser les colonnes verticales en horizontales en HTML/CSS ?

Mise en page à 3 colonnes en HTML/CSS

Problème :

Vous avez un HTML disposition avec trois colonnes disposées verticalement : gauche, centre, droite. Vous souhaitez réorganiser ces colonnes horizontalement à l'aide de CSS sans altérer la structure HTML.

Solution :

Pour obtenir une disposition horizontale des colonnes, vous pouvez utiliser le CSS suivant propriétés :

.column-left { float: left; width: 33.333%; }
.column-right { float: right; width: 33.333%; }
.column-center { display: inline-block; width: 33.333%; }

Explication :

• flotteur : gauche ; aligne la colonne de gauche sur le bord gauche de son conteneur.
• float: right; aligne la colonne de droite sur le bord droit de son conteneur.
• display: inline-block; place la colonne centrale en ligne avec les autres colonnes, éliminant ainsi les espaces qui seraient présents s'il s'agissait d'un élément de niveau bloc.
• La propriété width définit la largeur de chaque colonne sur un tiers de la largeur du conteneur. .

Conseils supplémentaires :

• Pour plus de flexibilité, vous pouvez créer un système de grille avec plusieurs colonnes en attribuant les classes column-* (par exemple, colonne-deux, colonne-trois).
• Utilisez les classes column-offset-* pour appliquer des décalages aux colonnes, vous permettant ainsi de contrôler l'espacement entre elles .
• Utilisez les classes column-inset-* pour insérer des colonnes dans le conteneur, personnalisant ainsi davantage la mise en page.

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!