Lignes et colonnes automatiques avec CSS

Question

J'ai ~ 170 petits éléments carrés dans un div, je voudrais qu'ils s'organisent en autant de lignes qu'ils ont besoin pour la largeur de la div (qui va changer avec la largeur de le navigateur).

<div id="container"> 
    <div class="sq"></div> 
    <div class="sq"></div> 
    <div class="sq"></div> 
</div> 

Je sais que je pouvais faire:

#container .sq { float:right; } 

avec un peu de rembourrage pour les faire recueillir sur le droit et le débordement lentement vers le bas - quelque chose comme ceci:

. . . . . . . 
. . . . . . . 
. . . . . . . 
     . . . . 

où chaque point est un sq élément, mais je veux vraiment quelque chose qui déborde vers le haut, donc ils ressembleraient à ceci:

 . . . . 
. . . . . . . 
. . . . . . . 
. . . . . . . 

ou comme celui-ci si le navigateur a été redimensionnée:

. . . . . . . 
. . . . . . . . . 
. . . . . . . . . 

Est-ce que quelqu'un a une idée si cela est possible en CSS?

Answer 1

La difficulté de mise en œuvre qui l'emporte probablement largement sur le désir du résultat. Vous pouvez être en mesure de le faire en utilisant JavaScript/jQuery mais je ne suis pas sûr que cela en vaille la peine?

Answer 2

Est-ce ce dont vous avez besoin?

http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/

Answer 3

Dans IE8, vous pouvez dire -ms-writing-mode: rl-bt. Bien que writing-mode fasse partie du travail CSS3 Text Layout, cette valeur n'est pas incluse dans la spécification de brouillon pour le moment.

Sur tous les autres navigateurs, vous aurez besoin d'un script. Par exemple, si chaque .sq avait float: right;, vous pouvez ajouter clear: right à chaque nième élément à partir de la fin de la liste. (Où n est le nombre de carrés que vous calculez correspondra à la largeur.) Ou simplement float: left; et ajouter un margin-left au premier carré pour le pousser aussi loin vers la droite il doit être.