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

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.

1. 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>

Code CSS :

.columns {
  column-count: 3;
}

Le code ci-dessus divisera le texte du paragraphe enveloppé dans l'élément dc6dce4a544fdca2df29d5ac0ea9906b 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.

2. 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>

Code CSS :

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

Le code ci-dessus divisera le texte du paragraphe enveloppé dans l'élément dc6dce4a544fdca2df29d5ac0ea9906b 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!