CSS [DIV-Tableless] Pile verticalement avec différentes hauteurs remplissant les espaces?

Question

J'ai différents DIVS flottant à gauche (float: left) qui ont des hauteurs différentes. J'ai besoin d'empiler cette divs l'image comme attaché:

http://www.krazy.es/images-stackov/capture-divs.jpg

Answer 1

Container 1,2,5 et 6 devrait être dans un div, et le récipient 3 et 4 doivent être dans un div. Flotter ces divs.

Answer 2

Il ressemble à la DIV avec "contenant 5" a un clear:left; ou clear:both; ensemble dans le CSS.

Modifier

de Nevermind, vous avez tous vos divs flottaient à gauche. Voici quelques exemples de code:

Sample Code on jsfiddle.net

Si vous jouez avec la largeur de la fenêtre, vous remarquerez que les divs tenteront de remplir tout l'espace horizontal disponible. Le désordre que vous voyez résulte des divs ayant différentes hauteurs verticales. Vous obtiendrez les résultats escomptés si:

1. They all had the same height (c.-à-tous ont 2 lignes de texte)
2. You assigned a height value to each div with height:90px; (ensemble au plus grand dénominateur commun)
3. Ou you decided to only have 3 columns of divs max, même si la fenêtre du navigateur est assez large pour accueillir plus. Ils vous pouvez mettre le conteneur 1, 2, & 3 dans un div sur le dessus, et le conteneur 4, 5, & 6 dans un autre div sous
4. Enfin (pour l'exhaustivité), you can put container 1 & 4 in a div, container 2 & 5 in a div, and container 3 & 6 in a div, and then float those divs left. Cela vous donnerait aussi 3 colonnes, mais c'est trop restrictif, et je ne le recommande pas (you can also set the height on the floated divs for better alignment).

L'option 2 est ma préférée.