Tutoriel CSS3 - Plusieurs colonnes

Bonjour ! Amis, avez-vous digéré les connaissances du tutoriel-animation CSS3 dans notre dernier article ? La nouvelle mise en page multi-colonnes (multi-colonnes) dans CSS3 est une extension puissante du mode de mise en page en bloc dans les pages Web HTML traditionnelles. Cette nouvelle syntaxe permet aux développeurs WEB front-end d'afficher facilement du texte dans plusieurs colonnes.

Colonnes multiples CSS3 :

Avec CSS3, vous pouvez créer plusieurs colonnes pour disposer votre texte – tout comme un journal !

Dans ce chapitre, vous apprendrez les attributs multi-colonnes suivants :

1. nombre de colonnes

2. 3. règle de colonne.

Prise en charge du navigateur :

Internet Explorer 10 et Opera prennent en charge les attributs multi-colonnes.

Firefox nécessite le préfixe -moz-.

Chrome et Safari nécessitent le préfixe -webkit-.

Remarque : Internet Explorer 9 et versions antérieures ne prennent pas en charge les propriétés multi-colonnes.

CSS3 crée plusieurs colonnes :

l'attribut column-count spécifie le nombre de colonnes par lesquelles les éléments doivent être séparés :

Exemple :

Mettez le texte dans l'élément div Séparé en trois colonnes :

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

l'attribut column-gap spécifie l'écart entre les colonnes :

Exemple :

Spécifiez un espacement de 40 pixels entre les colonnes :

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

la propriété column-rule définit les règles de largeur, de style et de couleur entre les colonnes.

Exemple :

Spécifiez les règles de largeur, de style et de couleur entre les colonnes :

div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

Tableau ci-dessous Tous les attributs de conversion sont répertoriés :

Ce qui précède est le contenu du didacticiel CSS3 - multi-colonnes. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com. )!