Wie verteile ich schwebende Elemente gleichmäßig mit einer dynamischen Spalten- und Zeilenzahl in CSS?

Ich habe mehrere Divs mit einer festen Breite und Höhe (denken Sie an eine Art Katalogansicht mit Artikelbildern). Jetzt möchte ich sie ähnlich dem Verhalten von float zeigen: left. Dies stellt sicher, dass je größer Ihr Browserfenster ist, desto mehr Divs in einer Zeile angezeigt werden.

Der Nachteil von float: left ist, dass es auf der rechten Seite eine große weiße Lücke gibt, bis eine andere Div passt. Jetzt habe ich die Aufgabe, die Divs gleichmäßig auf der Seite zu verteilen, und anstelle einer großen weißen Lücke auf der rechten Seite sollten sich gleichmäßig verteilte Lücken zwischen den einzelnen Divs befinden.

Eine Lösung in JavaScript ist einfach:http://dl.dropbox.com/u/2719942/css/columns.html

Wenn Sie die Größe des Browserfensters ändern, sehen Sie, dass es sich ähnlich wie float: left verhält, der Platz jedoch gleichmäßig zwischen den Feldern verteilt ist. Die Spalten- und Zeilenzahl wird mit JavaScript dynamisch berechnet:

<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>

Jetzt frage ich mich, ob es eine Lösung ohne JavaScript gibt? Ich würde eine reine CSS-Lösung bevorzugen, da ich möglicherweise bis zu Hunderte von Divs auf einer Seite habe.

Ich habe nachgesehenCSS3 Flexible Box LayoutDies scheint jedoch nur für feste Spaltenlayouts sinnvoll zu sein. In meinem Beispiel wird die Spaltenanzahl dynamisch berechnet. Dann habe ich es versuchtCSS3 Mehrspaltiges Layout, was ich könnte etwas ähnliches arbeiten, aber die divs sind vertikal ausgerichtet, innen abgeschnitten, und die Browser-Unterstützung ist noch nicht da. Dies scheint nützlicher für Text zu sein, aber in meinem Fall habe ich Divs mit Bildern, die nicht abgeschnitten werden sollten.

Meine Frage lautet also: Kann ich so etwas ohne JavaScript realisieren?

Antworten auf die Frage(4)

Ihre Antwort auf die Frage