Source: Some problems just never go away… especially where CSS3 multi-columns are concerned. Une alternative aux colonnes CSS3 avec le plugin jQuery Columnizer.
Problème: le contenu ne se répartit pas automatiquement de façon homogène lorsqu’on utilise les règles column-count et column-gap. Tenter les 2 fixes ci-dessous, sinon utiliser le plugin jQuery Columnizer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.columns { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 3em; -webkit-column-gap: 3em; column-gap: 3em; } /* Fix for unbalanced top alignment in Chrome */ .columns > * { -webkit-column-break-inside: avoid; column-break-inside: avoid; } |
|
1 2 3 4 5 |
/* New fix for Safari */ .columns > * { display: inline-block; width: 100%; } |