CSS - Divs flottants à hauteur variable

Question

J'ai un nombre infini de divs d'une largeur de 100px, qui peuvent tenir dans un parent de 250px de largeur. Quelle que soit la hauteur, j'ai besoin que les divs s'affichent en rangées, comme le montre l'image. J'ai essayé de résoudre ce problème, mais la hauteur des divisions semble tout faire foirer.

J'apprécierais vraiment votre aide. Merci :)

        <style>
            #holder{
            width:250px;
            border:1px dotted blue;
            display:inline-block;
        }
        .box{
            width:100px;
            height:150px;
            background-color:#CCC;
            float:left;
            text-align:center;
            font-size:45px;
            display:inline-block;
        }
        .one{
            background-color:#0F0;
            height:200px;
        }

        .two{
            background-color:#0FF;
        }

        .three{
            background-color:#00F;
        }

        .four{
            background-color:#FF0;
        }
    </style>

    <div id="holder">
        <div class="box one">1</div>
        <div class="box two">2</div>
        <div class="box three">3</div>
        <div class="box four">4</div>
    </div>

Voici le jsfiddle

Answer 1

À ma connaissance, il n'y a aucun moyen de résoudre ce problème avec du pur CSS (qui fonctionne dans tous les navigateurs courants) :

• Flotteurs ne fonctionnent pas .
• display: inline-block ne fonctionne pas .
• position: relative avec position: absolute nécessite réglage manuel des pixels . Si vous utilisez un langage côté serveur et que vous travaillez avec des images (ou quelque chose dont la hauteur est prévisible), vous pouvez gérer le réglage des pixels "automatiquement" avec du code côté serveur.

Au lieu de cela, utilisez jQuery Masonry .

Answer 2

En supposant que vos besoins ressemblent plus à votre code d'exemple coloré alors :

.box:nth-child(odd){
    clear:both;
}

s'il s'agit de 3 rangées, alors nth-child(3n+1)

Answer 3

Comme on l'a fait remarquer à juste titre, c'est impossible avec les seules CSS... heureusement, j'ai trouvé une solution en http://isotope.metafizzy.co/

Cela semble résoudre entièrement le problème.

Answer 4

Avec un peu d'aide de ce commentaire (http://stackoverflow.com/questions/4889230/css-block-float-left), j'ai trouvé la réponse.

Sur chaque "ligne" que je fais, j'ajoute un nom de classe "gauche".
Sur chaque autre "rangée" que je fais, j'ajoute un nom de classe "droite".

Puis je flotte à gauche et à droite pour chacun de ces noms de classe !

La seule complication est que l'ordre de mon contenu est inversé sur les rangées "de droite", mais cela peut être résolu en utilisant PHP.

Merci pour votre aide !

        <style>
        #holder{
            width:200px;
            border:1px dotted blue;
            display:inline-block;
        }
        .box{
            width:100px;
            height:150px;
            background-color:#CCC;
            float:left;
            text-align:center;
            font-size:45px;
        }
        .one{
            background-color:#0F0;
            height:200px;
        }

        .two{
            background-color:#0FF;
        }

        .three{
            background-color:#00F;
            float:right;
        }

        .four{
            background-color:#FF0;
            float:right;
        }
        .left{float:left;}
        .right{float:right;}
    </style>

    <div id="holder">
        <div class="box one left">1</div>
        <div class="box two left">2</div>
        <div class="box four right">4</div>
        <div class="box three right">3</div>
    </div>
</body>

Answer 5

Si quelqu'un cherche encore des alternatives, en voici une. Essayez d'utiliser la propriété (-moz-/-webkit-) column-width. Cela permet de résoudre le problème de la hauteur variable des divs. Cependant, column-width ajoute une nouvelle division à la fin de la colonne.

Sinon, c'est jQuery Masonry qui fonctionne le mieux.