alignement vertical du float: left

Question

de div

J'ai environ 10 div de largeurs égales de mais différentes hauteurs et je veux qu'ils emboîtent le plus serré possible.

Lorsqu'il est réglé sur le flotteur gauche, ils ne sont pas alignés les uns aux autres verticalement mais sont alignés au fond de la « ligne » ci-dessus.

Je suis moqué un peu exemple ci-dessous et que vous souhaitez pour se débarrasser de l'espace blanc. Avez-vous des suggestions. Je suis limité à l'utilisation de ce format car le contenu est fourni en externe.

Vive

<div style="width:500px;"> 
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div> 
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div> 
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div> 
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div> 
</div> 

Answer 1

Essayez flottant le premier à gauche, puis à droite suivante, la suivante à gauche, et la suivante à droite ....

EDIT - En réponse aux commentaires. Si vous connaissez le nombre maximum de span que vous pourrez toujours aller chercher (et en supposant que ce n'est pas beaucoup plus que les 10 que vous avez indiqué (car cette méthode pourrait devenir très en désordre très rapidement), et en supposant que CSS3 n'est pas une option vous pouvez essayer quelque chose comme ça,

<style> 
    span, /* all spans get display and width, odd spans get float:left */ 
    span+span+span, 
    span+span+span+span+span, 
    span+span+span+span+span+span+span { 
     display:block; 
     width:250px; 
     float:left; 
    } 

    span+span, /* even spans get float:right */ 
    span+span+span+span, 
    span+span+span+span+span+span, 
    span+span+span+span+span+span+span+span { 
     float:right; 
    } 
</style> 

vous auriez besoin de continuer à ajouter span+span+... « s jusqu'à ce que vous avez atteint le nombre maximum de consécutifs que vous aurez jamais. la question correspond à seulement huit. donc, ce n'est pas plus jolie méthode!

Answer 2

Votre scénario pourrait utiliser plus de précisions.

S'ils ont toujours la même hauteur, vous pouvez coder en dur leur disposition. Pour fixer votre mockup:

<div style="width:500px;"> 
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div> 
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div> 
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left; margin-top: -80px;"></div> 
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div> 
</div> 

Mais c'est assez évident et probablement ne vous aide pas parce qu'ils ont probablement hauteurs indeterminably aléatoires. Dans ce cas, comme ils ont toujours la même largeur et que vous en avez toujours 10, vous pouvez les grouper en empilements verticaux de 3 ou 4, puis faire coïncider chaque pile les uns avec les autres.

<div style="width:250px; float:left;"> 
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div> 
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div> 
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div> 
</div> 
<div style="width:250px; float:left;"> 
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div> 
<div style="display:block; width:250px; height:180px; background-color:red; float:left;"></div> 
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div> 
</div> 
<div style="width:250px; float:left;"> 
<div style="display:block; width:250px; height:80px; background-color:#333; float:left;"></div> 
<div style="display:block; width:250px; height:140px; background-color:#888; float:left;"></div> 
<div style="display:block; width:250px; height:160px; background-color:#354689; float:left;"></div> 
</div>