Mam wiele div o stałej szerokości i wysokości (pomyśl o jakimś widoku katalogu z obrazkami artykułów). Teraz chcę pokazać je podobnie do zachowania float: left. Dzięki temu im większe okno przeglądarki, tym więcej div w jednym wierszu.

Wadą rozwiązania float: left jest to, że po prawej stronie jest duża biała luka, aż zmieści się inny div. Teraz mam zadanie równomiernego rozłożenia div na stronie, a zamiast dużej białej szczeliny po prawej stronie, powinny być równomiernie rozmieszczone luki między pojedynczymi divami.

Rozwiązanie w JavaScript jest łatwe:http://dl.dropbox.com/u/2719942/css/columns.html

Widać, że jeśli zmienisz rozmiar okna przeglądarki, zachowuje się ono podobnie jak float: po lewej, ale przestrzeń jest równomiernie rozłożona między ramkami. Liczba kolumn i wierszy jest obliczana dynamicznie za pomocą 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>

Teraz zastanawiam się, czy istnieje rozwiązanie bez JavaScript? Wolałbym rozwiązanie oparte tylko na CSS, ponieważ będę mógł mieć nawet setki div na jednej stronie.

Zajrzałem do środkaCSS3 Flexible Box Layout, ale wydaje się to być użyteczne tylko dla stałych układów kolumn. W moim przykładzie liczba kolumn jest obliczana dynamicznie. Potem spróbowałemUkład wielokolumnowy CSS3, który mógłbym uzyskać coś podobnego, ale divy są wyrównane w pionie, odcięte w środku, a obsługa przeglądarki jeszcze nie istnieje. Wydaje się to bardziej przydatne w przypadku tekstu, ale w moim przypadku naprawiłem div z obrazami, które nie powinny zostać odcięte.

Więc moje pytanie brzmi: czy mogę zrealizować coś takiego bez JavaScript?