У меня есть несколько div с фиксированной шириной и высотой (подумайте о каком-то виде каталога с фотографиями статьи). Теперь я хочу показать им подобное поведение float: left. Это гарантирует, что чем больше окно вашего браузера, тем больше элементов div будет отображаться в одной строке.

Обратной стороной решения float: left является то, что с правой стороны есть большой белый зазор, пока не подойдет другой div. Теперь у меня есть задача распределять div равномерно на одной странице, и вместо большого белого пробела справа должны быть равномерно распределенные промежутки между отдельными div.

Решение в JavaScript легко:http://dl.dropbox.com/u/2719942/css/columns.html

Вы можете видеть, что при изменении размера окна браузера оно ведет себя подобно float: left, но пространство равномерно распределяется между полями. Количество столбцов и строк рассчитывается динамически с помощью 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>

Теперь мне интересно, есть ли решение без JavaScript? Я бы предпочел решение только для CSS, потому что у меня может быть до сотен div на одной странице.

Я смотрел вCSS3 Гибкий макет коробки, но это, кажется, полезно только для фиксированных макетов столбцов. В моем примере количество столбцов вычисляется динамически. Потом я попробовалМногостолбцовый макет CSS3, что я мог бы сделать что-то похожее, но div выровнены по вертикали, обрезаны внутри, и поддержка браузера пока не существует. Это кажется более полезным для текста, но в моем случае я установил div с изображениями, которые не должны быть обрезаны.

Итак, мой вопрос: могу ли я реализовать что-то подобное без JavaScript?