Comment organiser les divs enveloppés en haut?

Question

Dans mes écrans d'application Web, j'ai de nombreuses zones qui ont la même largeur et des hauteurs différentes. Par exemple. J'ai six divs:

<div style="height: 50px">1</div> 
    <div style="height:150px">2</div> 
    <div style="height:250px">3</div> 
    <div style="height:130px">4</div> 
    <div style="height:120px">5</div> 
    <div style="height: 30px">6</div> 

et le css:

div{ 
     border:1px solid red; 
     float:left; 
     width:100px; 
    } 

navigateurs

il affiche comme ceci:

Si la fenêtre du navigateur est modifiée pour divs plus faible largeur sont automatiquement enveloppé. Les divs enveloppés sont alignés en fonction de la div supérieure qui a la hauteur maximale. Inutilement espaces vides apparaît à l'écran:

Est-il possible d'organiser tous les divs enveloppé vers le haut?

Answer 1

Je ne sais pas de toute façon de le faire en CSS. Le plugin jQuery Masonry devrait vous permettre de le faire si vous n'êtes pas opposé à l'utilisation de JavaScript.

Answer 2

Try this ...

http://masonry.desandro.com//

Il est peut-être un peu flashy que ce que vous voulez/besoin. Mais il n'y a pas d'option CSS pour résoudre ce problème.