Comment distribuer flottait éléments uniformément avec une dynamique de colonnes et nombre de lignes dans le CSS?

J'ai plusieurs divs avec une largeur fixe et la hauteur (penser à une sorte de catalogue de la vue avec l'article des photos). Maintenant, je veux leur montrer semblable pour le comportement d'float:left. Cela garantit que la plus grande fenêtre de votre navigateur est, le plus divs sont affichés sur une seule ligne.

L'inconvénient de l'float:left solution est qu'il ya un grand espace blanc sur le côté droit, jusqu'à ce qu'un autre div sera adaptée. Maintenant, j'ai la tâche de distribuer les divs uniformément une de la page, et au lieu d'un grand espace blanc sur le côté droit, il doit être uniformément distribués écarts entre la unique divs.

Une solution en JavaScript est facile: http://dl.dropbox.com/u/2719942/css/columns.html

Vous pouvez le voir, si vous redimensionnez la fenêtre du navigateur, il se comporte de façon similaire à float:left, mais l'espace est réparti uniformément entre les cases. La colonne et le nombre de lignes est calculée de manière dynamique avec JavaScript:

  function updateLayout() {
    var boxes = document.getElementsByClassName('box');
    var boxWidth = boxes[0].clientWidth;
    var boxHeight = boxes[0].clientHeight;
    var parentWidth = boxes[0].parentElement.clientWidth;

    //Calculate how many boxes can fit into one row
    var columns = Math.floor(parentWidth / boxWidth);

    //Calculate the space to distribute the boxes evenly
    var space = (parentWidth - (boxWidth * columns)) / columns;

    //Now let's reorder the boxes to their new positions
    var col = 0;
    var row = 0;
    for (var i = 0; i < boxes.length; i++) {
      boxes[i].style.left = (col * (boxWidth + space)) + "px";
      boxes[i].style.top = (row * boxHeight) + "px";

      if (++col >= columns) {
        col = 0;
        row++;
      }
    }
  }

Maintenant, je me demande si il existe une solution sans JavaScript? Je préfère un CSS seule solution, parce que j'aurai peut-être jusqu'à des centaines de divs sur une seule page.

J'ai regardé dans CSS3 Flexible Zone de Mise en page, mais cela semble être seulement utile pour les mises en page en colonnes. Dans mon exemple, le nombre de colonnes obtient calculées dynamiquement. Ensuite, j'ai essayé CSS3 Multi-colonnes de Mise en page, que je pourrais obtenir quelque chose de semblable de travail, mais les divs sont alignés verticalement, couper à l'intérieur, et la prise en charge du navigateur n'est pas encore là. Ce qui semble le plus utile pour le texte, mais dans mon cas, j'ai fixé les divs avec des images, qui ne devrait pas être coupée.

Donc ma question est: puis-je réaliser quelque chose comme ça, sans JavaScript?