hauteur différente divs flotter dans deux colonnes

J'ai deux colonnes et voulez la pile de divs de différentes hauteurs dans l'ordre d'apparition.

Les divs sont créées dynamiquement.

Si je ne les faire flotter sur 50% de la largeur, j'ai bientôt venir en situation div #4 est 5 fois plus élevé que les entrants quelques divs. Alors la prochaine div est top aligné avec le bas de la précédente div.

J'ai besoin pour s'adapter à l'enfant divs dans un conteneur pour être exact match comme ceci:

----- -------
  1      2
-----
  3   -------
-----    4
  5
-----
  6
-----
  7   -------
-----    8
  9

----- 
 10   -------
        11
      -------
      -------
-----

Ici est extrait de code de ce que j'ai fait:

<style>
    .box {background:#20abff; color:#fff; width:50%; margin: 5px;}
    .left {float:left;}
    .right {float:right;}
    .container {width:205px;}
</style>
    <body>
        <div class="container">
            <div class="box left" style="height:60px;">1</div>
            <div class="box left" style="height:80px;">2</div>
            <div class="box left" style="height:30px;">3</div>
            <div class="box left" style="height:70px;">4</div>
            <div class="box left" style="height:60px;">5</div>
            <div class="box left" style="height:20px;">6</div>
            <div class="box left" style="height:40px;">7</div>
            <div class="box left" style="height:90px;">8</div>
            <div class="box left" style="height:30px;">9</div>
        </div>
    </body>

et il ressemble à ceci

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

heureux d'aider

Vous pouvez poster votre code html et css?
Qu'avez-vous essayé?
Je vois ce que vous voulez faire.. quel est le problème?

OriginalL'auteur dzona | 2012-07-10

  1. 12

    Vous allez avoir à faire avec JavaScript. Si vous utilisez jQuery, il est un excellent plugin appelé Maçonnerie. Il y a aussi le non la version jQuery.

    Pour citer le README sur GitHub:

    La maçonnerie est une dynamique de la grille de mise en page de script. Il pense que le flip-côté
    de CSS flotteurs. Alors que flottant organise les éléments horizontalement puis
    verticalement, la Maçonnerie organise les éléments verticalement, le positionnement de chaque
    élément dans la prochaine place libre dans la grille. Le résultat minimise
    vertical écarts entre les éléments de hauteur variable, tout comme un franc-maçon
    côté pierres dans un mur.

    La disposition à colonne unique est probablement ce que vous cherchez.

    Si vous n'avez pas l'esprit en laissant les anciens navigateurs dans la poussière, il y a les CSS3 colonne propriétés. Il y a un exemple ici, sur Quirksmode, et un peu de documentation sur le MDN.

    +1 La Maçonnerie plugin est le chemin à parcourir pour que cette mise en page.
    Mais la maçonnerie ne fonctionne pas sous IE... aucune solution
    Avez-vous de l'essayer, même dans IE? Le site de démo fonctionne parfaitement dans IE10, 8 et 7.
    Ya j'ai essayé plusieurs fois. IE n'a pas pu afficher dans la maçonnerie de la mode. Où que chrome et mozilla n'
    Qui IE avez-vous essayé? Travaux de maçonnerie très bien pour moi dans toutes les versions.

    OriginalL'auteur Bojangles

  2. 2

    Utiliser 2 div conteneur, mettre de la colonne dans cette div conteneur,afin de donner à cette div en float à gauche et à droite....il peut fonctionner...
    Également de la grille de mise en page de travail.

    OriginalL'auteur