Comment puis-je créer automatiquement une mise en page de texte sur deux colonnes avec CSS ?

Débordement automatique du texte sur deux colonnes à l'aide de CSS

Pour créer une mise en page de texte qui s'écoule de manière transparente dans deux colonnes, envisagez de tirer parti de la puissance du CSS . Contrairement à la méthode traditionnelle d'utilisation de plusieurs divs, CSS fournit une solution élégante qui permet d'obtenir le résultat souhaité sans avoir besoin d'éléments HTML supplémentaires.

La solution réside dans l'utilisation de la propriété CSS column-count. En définissant cette propriété sur la valeur 2, vous pouvez diviser le texte en deux colonnes égales. Pour améliorer l'attrait esthétique, vous pouvez également spécifier un espacement de colonne pour ajouter un espacement entre les colonnes et une règle de colonne pour créer une ligne verticale les séparant.

Voici un exemple de l'apparence du CSS :

div.multi {
  column-count: 2;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

En enveloppant le contenu du texte dans un

avec la classe multi, le CSS débordera automatiquement le texte en deux colonnes, créant une mise en page visuellement attrayante qui ressemble à celle d'un journal.

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!

css html count for using class Property this overflow column

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn