spécifiant un conteneur div css pour que les éléments dépassant sa hauteur continuent dans sa prochaine 'colonne'

Question

Comment spécifier un conteneur div css pour qu'il applique un comportement de type colonne, de sorte que lorsque la hauteur du conteneur est dépassée par le éléments dans sa première «colonne», les éléments continuent simplement dans la prochaine «colonne» du conteneur. Mon but n'est pas de spécifier des colonnes, mais seulement la hauteur du conteneur et les propriétés dont les éléments ont besoin pour remplir les 'colonnes'.

Merci,

Lille

Answer 1

De la même manière que vous spécifiez tout div, vous pouvez donner soit un class ou un id.

En ce qui concerne votre intention d'utiliser la div pour appliquer « colonne comme » le comportement, vous êtes limité à soit une application limitée des colonnes CSS:

#div_id { 
    -moz-column-width: 10em; 
    -webkit-column-width: 10em; 
    -moz-column-gap: 1em; 
    -webkit-column-gap: 1em; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    -moz-column-rule: 1px solid #000; 
    -webkit-column-rule: 1px solid #000; 
    column-width: 10em; /* not well-implemented yet. */ 
    column-gap: 1em; 
    column-count: 3; 
    column-rule: 1px solid #000; 
} 

Si vous spécifiez -vendor-column-count: 3 sans indiquer -vendor-column-width la navigateur implémentera 3 colonnes avec la largeur automatiquement calculée par le moteur de rendu, inversement si vous spécifiez le -vendor-column-width: 10em sans spécifier le -vendor-column-count le navigateur va calculer le nombre approprié de colonnes à afficher. Il est clair que ces propriétés CSS3 sont implémentées uniquement par Chrome/Safari (-webkit) et Firefox (-moz).

Pour la prise en charge de plusieurs navigateurs, vous devez utiliser une solution JavaScript (ou utiliser une technologie côté serveur): Un List Apart a un article that references a JS implementation.