Eu tenho vários divs com largura e altura fixas (pense em algum tipo de exibição de catálogo com fotos de artigos). Agora quero mostrá-los semelhante ao comportamento de float: left. Isso garante que quanto maior for a janela do navegador, mais divs serão mostrados em uma linha.

A desvantagem da solução float: left é que há uma grande lacuna branca no lado direito, até que outra div se encaixe. Agora tenho o trabalho de distribuir uniformemente as divs pela página e, em vez de uma grande lacuna branca no lado direito, deve haver intervalos uniformemente distribuídos entre os divs únicos.

Uma solução em JavaScript é fácil:http://dl.dropbox.com/u/2719942/css/columns.html

Você pode ver, se você redimensionar a janela do navegador, ela se comporta de maneira semelhante a float: left, mas o espaço é distribuído uniformemente entre as caixas. A contagem de colunas e linhas é calculada dinamicamente com JavaScript:

<code>  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++;
      }
    }
  }
</code>

Agora eu me pergunto se existe uma solução sem JavaScript? Eu preferiria uma solução somente CSS, porque eu possivelmente teria centenas de divs em uma página.

Eu olhei paraLayout da Caixa Flexível CSS3, mas isso parece ser útil apenas para layouts de coluna fixos. No meu exemplo, a contagem de colunas é calculada dinamicamente. Então eu tenteiLayout de múltiplas colunas CSS3, o que eu poderia conseguir algo semelhante trabalhando, mas os divs são alinhados verticalmente, cortados no interior, e o suporte ao navegador ainda não está lá. Isso parece mais útil para o texto, mas no meu caso eu fixei divs com imagens, que não devem ser cortadas.

Então, minha pergunta é: posso realizar algo assim sem JavaScript?