Comment puis-je empiler chronologiquement différentes divs de hauteur dans deux colonnes?

Question

J'ai deux colonnes et je veux empiler des divs de différentes hauteurs dans l'ordre d'apparition.

Les divs sont créés dynamiquement.

J'ai essayé de faire cela en faisant flotter le premier étage à gauche et le second à droite, mais ils semblent toujours être des anomalies.

Jetez un oeil à cette démo, il devrait tout expliquer.

http://dl.getdropbox.com/u/142343/divstack.html

Answer 1

Essayez d'utiliser "clear: left" pour flottaient à gauche et "claire: droite" pour flottaient à droite.

Vous ne pouvez pas créer deux colonnes sans espace vide entre avec cette structure HTML.

Si vous voulez deux colonnes sans espace vide, vous devez générer différents éléments de structure - placer des éléments impairs dans une colonne et même dans d'autres.

Answer 2

Placez-les dans un tableau avec deux cellules. (Oui, oui, la flamme loin!)

Ajouté: Pour clarifier: ce que je voulais dire ceci:

<table> 
    <tr> 
     <td> 
      <div>First DIV</div> 
      <div>Third DIV</div> 
      <div>Fifth DIV</div> 
     </td> 
     <td> 
      <div>Second DIV</div> 
      <div>Fourth DIV</div> 
      <div>Sixth DIV</div> 
     </td> 
    </tr> 
</table> 

Throw dans certains paramètres de largeur et de rembourrage, et vous aurez deux piles peu soignées . Maintenant, en regardant vos exemples, je pense que j'ai réalisé autre chose pour le moment. Vous voulez que les <div> s'organisent automatiquement de manière à ce que les deux piles aient la même taille que possible. Je ne pense pas que ce soit possible. Eh bien, vous pouvez essayer de les restituer, puis vérifier leurs hauteurs avec JS, et les réorganiser ... mais cela provoquera des scintillements désagréables dans le navigateur.

Ajouté 2: Vérifiez le lien: http://valts.21.lv/problem/DivStack.html

Answer 3

Je ne sais pas si cela est l'effet désiré que vous allez pour, mais essayez d'utiliser

.left { 
    float:left; 
    clear:both; 
} 
.right { 
    float:left; 
} 

que votre CSS gauche et à droite