Mise en page CSS complète de divs taille au hasard

Question

Possible en double:
Any ideas on how I could implement a grid-view in CSS? - CSS

Je suis en train de créer une mise en page qui est en arrière de ce que je fais habituellement. J'ai des centaines de divs de taille aléatoire que je veux remplir autant de la page que possible. En tant que hack, il pourrait ressembler à ceci:

|--------||-------------------||----||-----------| 
|  ||  2   || 3 ||  4  | 
| 1 ||-------------------|| ||-----------| 
|  ||-----------------| |----| 
|  ||     ||---------| 
|--------||  5  ||   | 
|--------||     || 6 | 
| 7 ||-----------------||   | 
|  |     |---------| 
|--------| 

Je joue avec flotteur gauchistes, mais ils ne se déplacent pas vers le haut pour combler les lacunes. Comment cela peut-il être fait?

Merci les gars!

Answer 1

Ce genre de question a été posée hier aussi. La solution consistait à utiliser un plugin JQuery: Masonry.

Any ideas on how I could implement a grid-view in CSS? - CSS

Answer 2

Utilisez le jQuery Masonry plugin ou:

Vous devrez créer une colonne/base grille système. Par exemple, div 1 et 7 vont dans leur propre div parent, div 2 et 5 vont dans leur propre div parent, 3 et 6 vont dans leur propre parent et ainsi de suite.

Vous pourriez être intéressé à utiliser quelques-uns des célèbres systèmes de réseau:

• 45+ CSS Grid Systems
• 4 CSS Grid Systems and Why

Vous pouvez également créer la via:

• Grid System Generator