Propriétés de mise en page multi-colonnes CSS : nombre de colonnes et espacement de colonnes-tutoriel CSS-php.cn

CSS 多列布局属性：column-count 和 column-gap

Propriétés de mise en page multi-colonnes CSS : nombre de colonnes et espacement de colonnes, des exemples de code spécifiques sont requis

Dans le développement front-end, la mise en œuvre d'une mise en page multi-colonnes est une exigence très courante. En CSS, il existe deux propriétés qui peuvent nous aider à implémenter facilement une disposition multi-colonnes : le nombre de colonnes et l'espacement des colonnes.

attributcolumn-count

l'attributcolumn-count est utilisé pour spécifier en combien de colonnes le contenu d'un élément est divisé pour l'affichage. Il accepte une valeur entière positive indiquant le nombre de colonnes en lesquelles diviser le contenu. Il convient de noter que lorsque l'attribut column-count est défini, le navigateur nous aidera automatiquement à calculer et à disposer le nombre de colonnes.

Ce qui suit est un exemple :

Code HTML :

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

Copier après la connexion

Code CSS :

.columns {
  column-count: 3;
}

Copier après la connexion

Le code ci-dessus divisera le texte du paragraphe enveloppé dans l'élément

en trois colonnes pour l'affichage. Le navigateur organisera automatiquement le contenu en fonction de la longueur et du nombre de colonnes pour obtenir un affichage sur plusieurs colonnes.

attributcolumn-gap

l'attributcolumn-gap est utilisé pour spécifier la distance entre les colonnes. Il accepte une valeur de longueur qui représente l'espacement entre les colonnes. Nous pouvons utiliser des valeurs de pixels, des pourcentages ou des mots-clés pour définir la distance correspondante.

Ce qui suit est un exemple :

Code HTML :

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

Copier après la connexion

Code CSS :

.columns {
  column-count: 3;
  column-gap: 20px;
}

Copier après la connexion

Le code ci-dessus divisera le texte du paragraphe enveloppé dans l'élément

en 3 colonnes pour l'affichage, et il y aura une ligne. entre chaque colonne, espacement de 20 pixels.

Résumé :

En utilisant les attributs column-count et column-gap, nous pouvons facilement implémenter une disposition multi-colonnes. column-count est utilisé pour spécifier en combien de colonnes le contenu est divisé, et column-gap est utilisé pour spécifier la distance entre les colonnes. Ces deux attributs peuvent rapidement nous aider à obtenir des effets de mise en page multi-colonnes et à avoir une bonne contrôlabilité.

Ce qui précède est une introduction aux propriétés de mise en page multi-colonnes CSS column-count et column-gap. J'espère que cela vous sera utile. Tout le monde est invité à essayer d'utiliser ces attributs dans des projets réels pour obtenir de meilleurs effets de 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!

Étiquettes associées：

column-count disposition multi-colonnes CSS column-gap

source：php.cn

Article précédent：Analyse des attributs de largeur CSS : largeur maximale et largeur minimale Article suivant：Conseils d'optimisation des attributs de style clair CSS : réinitialiser et normaliser

Déclaration de ce site Web

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

Derniers articles par auteur