L'uso del conteggio delle colonne CSS non bilancia il contenuto solo in Chrome

Question

Ho una pagina del catalogo che elenca le storie in un catalogo e mi piacerebbe mostrarle su 3 colonne. Mi piacerebbe che l'output fosse bilanciato tra le tre colonne in modo che ogni colonna avesse approssimativamente la stessa altezza. Gli oggetti non sono tutti della stessa altezza ciascuno.

Tuttavia, sto riscontrando che Chrome non bilancia correttamente le colonne e quindi le prime due colonne sono molto lunghe e le ultime (3a) colonne sono molto corte con in genere nessuna, solo 1 o due voci. Ho aggiunto l'attributo

column-fill: balance; 

per essere sicuro, anche se dovrebbe essere il valore predefinito, ma non fa differenza. Qualsiasi aiuto apprezzato.

CSS

#catalogue-section { 
/* Prevent vertical gaps */ 
line-height: 0; 

-webkit-column-count: 3; 
-webkit-column-gap: 0px; 
-webkit-column-fill: balance; 
-moz-column-count: 3; 
-moz-column-gap:  0px; 
-moz-column-fill: balance; 
column-count:   3; 
column-gap:   0px; 
column-fill:balance; 

} 

#catalogue-section div { 
/* Just in case there are inline attributes */ 
width: 100% !important; 
height: auto !important; 
} 

HTML

Vedi http://www.shortkidstories.com/story

Se andate alla pagina in IE o Firefox riequilibra le colonne, ma non in Chrome.

Answer 1

L'OP ha riscontrato il problema. Stava usando Animate.js per volare negli oggetti da 4 direzioni diverse. Ha scoperto che se fai volare gli oggetti dal basso usando Animate.js, allora prevale sul bilanciamento multi-colonna - ma solo su Chrome!

(Pubblicato solo per lasciare che gli altri sanno che è stato risolto)

Answer 2

Ecco una soluzione parziale:

• Rimuovere height: auto !important; da #catalogue-section div
• Quindi aggiungere più altezza per div.catalogue, ad esempio, min-height: 322px;
• Ispezionare e regolare di conseguenza.