Les colonnes CSS3 sont une disposition en colonnes utile

CSS fournit une description de style pour le langage de balisage HTML, définissant la manière dont les éléments qu'il contient sont affichés. CSS est une avancée majeure dans le domaine de la conception Web. Il peut être utilisé pour modifier un petit style afin de mettre à jour tous les éléments de page qui lui sont liés. Il y a toujours eu un casse-tête pour nous en CSS, c'est-à-dire qu'il est difficile de créer des mises en page. Bien sûr, il existe de nombreuses façons et techniques de créer diverses mises en page, mais nous pensons toujours que CSS devrait fournir de nouvelles propriétés afin que nous puissions mieux gérer les mises en page. Heureusement, CSS3 fournit un lot de nouveaux attributs de colonne pour créer des dispositions de colonnes, avec ces attributs, nous n'avons plus besoin d'utiliser float, clear, margin et d'autres attributs pour le contrôle, ce qui évite bien des problèmes.

Code CSS

Les attributs de série de colonnes en CSS3 fournissent diverses fonctions En les utilisant en combinaison, vous pouvez obtenir n'importe quelle disposition de colonne correspondante :

nombre de colonnes : Nombre de. columns

column-gap : largeur de l'espace entre les colonnes

column-width : la largeur recommandée ne peut pas être utilisée, le navigateur calcule en fonction de cette valeur

column-rule- width : La largeur de la ligne de séparation entre les colonnes

column-rule-style : Le style de la ligne de séparation entre les colonnes

column-rule-color : Démonstration de la ligne de séparation entre les colonnes

column-span : permet à la largeur d'un élément de s'étendre sur plusieurs colonnes

column-fill : disposition des colonnes

Pour créer une belle disposition de colonnes, vous devez au moins pour utiliser le nombre de colonnes et l'espacement des colonnes :

/* 3 colonnes, espacement de 10 px entre chaque colonne*/ul.col-3 {

column-count: 3;
column-gap: 10px;}

Si vous Si vous vouloir embellir l'espace entre les colonnes, c'est aussi très simple :

/* 3 colonnes, espacement de 10px entre chaque colonne, avec une ligne d'isolation dorée*/ul.col-3 {

column-count: 3;
column-gap: 10px;
column-rule: 1px solid #fc0;}

L'élément spécifié peut également s'étendre sur plusieurs colonnes :

/* Prenons le HTML suivant comme exemple :

<div>
<h3>表头!</h3>
<div>列 1</div>
<div>列 2</div>
<div>列 3</div>
<div>列 4</div>
<div>列 5</div>
<div>列 6</div>
<div>列 7</div>
<div>列 8</div>
<div>列 9</div>
<div>列 10</div>
<div>列 11</div>
<div>列 12</div>
</div>

*/div.col-3 {
column-count: 3;
column-gap: 5px;}div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;}

C'est très simple, et les résultats affichés sont exactement comme nous l’espérions !

L'utilisation de colonnes CSS3 pour créer des mises en page présente de nombreux avantages : vous n'avez pas besoin de calculer la largeur et vous n'avez pas à vous soucier de savoir si le contenu va casser la mise en page. Le système calculera ces valeurs mathématiques. des problèmes pour vous. Un autre problème est la sémantique claire et soignée.

Le contenu ci-dessus concerne la mise en page de création de colonnes en CSS3. J'espère qu'il sera utile à tout le monde.

Recommandations associées :

Comment utiliser CSS3 et JS pour créer un arrière-plan dynamique de blocs montants

Principales applications fonctionnelles de CSS3

Comment créer une mise en page réactive avec CSS3

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!