L’utilisation des colonnes multiples sans float en CSS3

colonnes multiples sans float en CSS3

Aligner les colonnes en CSS3 est possible grâce au Multi-column Layout afin d’aligner vos contenus sur de nombreuses colonnes de largeur uniforme.

Le Multi-column Layout Module en CSS3

Il faut savoir que les colonnes multiples doivent avoir une taille identique. Le module est destiné aux éléments de type table, block et inline-block.

On distingue deux propriétés pour la propriété: column-width et column-count.
En faite, column-width est la largeur de la colonne et column-count est le nombre de colonnes.

Pour combiner les 2 propriétés on utilise la propriété columns :

Dont 3 représente le nombre de colonnes et 100px la largeur de la colonne.
Attention, les colonnes ne peuvent pas être positionnées en fixed ou absolute.

D’autres propriétés sur le Multi-column Layout:

  • L’espace entre les colonnes est définit par la propriété column-gap.
    Cette propriété se présente sous la forme :
  • Une bordure de séparation peut être insérer entre les colonnes et est définit par les mêmes propriétés que celles des bordures CSS présentes dans CSS2 : column-rule-color, column-rule-style et column-rule-width. L’ensemble de ces propriétés peuvent être raccourcie par la propriété column-rule :
  • Pour étaler sur plusieurs colonnes un élément on peut utiliser la propriété column-span:

Tableau des compatibilités

Navigateurs Versions Détails
Internet Explorer Internet Explorer 10+ Sans préfixe
Firefox FirefoxFirefox Mobile Toutes versions avec préfixe -moz-Certaines propriétés ne sont pas reconnues
Chrome ChromeChrome Mobile Toutes versions avec préfixe -webkit-
Opera Opera 11.1+Opera Mobile 11.1+ Sans préfixe
Safari Safari 3.2+Safari Mobile 3.2+ Avec préfixe -webkit-
Android Browser Android Browser 2.1+ Avec préfixe -webkit-

Répondre