Tengo varios divs con un ancho y una altura fijos (piense en algún tipo de vista de catálogo con imágenes de artículos). Ahora quiero mostrarles un comportamiento similar al de float: left. Esto asegura que cuanto más grande sea la ventana de su navegador, más divs se muestran en una fila.

La desventaja del flotador: la solución a la izquierda es que hay una gran brecha blanca en el lado derecho, hasta que otro div se ajuste. Ahora tengo el trabajo de distribuir los divs uniformemente en la página, y en lugar de un gran espacio en blanco en el lado derecho, debe haber espacios distribuidos equitativamente entre los divs individuales.

Una solución en JavaScript es fácil:http://dl.dropbox.com/u/2719942/css/columns.html

Puede ver que, si cambia el tamaño de la ventana del navegador, se comporta de manera similar a float: left, pero el espacio se distribuye de manera uniforme entre las cajas. El recuento de columnas y filas se calcula dinámicamente con 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>

Ahora me pregunto si hay una solución sin JavaScript? Preferiría una solución solo para CSS, porque posiblemente tendré hasta cientos de divs en una página.

Miré enCSS3 Flexible Box Layout, pero esto parece ser solo útil para diseños de columnas fijas. En mi ejemplo, el recuento de columnas se calcula de forma dinámica. Entonces lo intentéCSS3 diseño de varias columnas, que podría hacer que algo similar funcionara, pero los divs están alineados verticalmente, cortados en el interior, y el soporte del navegador aún no está allí. Esto parece más útil para el texto, pero en mi caso he arreglado divs con imágenes, que no deberían cortarse.

Entonces mi pregunta es: ¿puedo darme cuenta de algo así sin JavaScript?