Unbekannte Breite für variable Spaltenanzahl

Question

Ich möchte einige Elemente in einer Spalte anordnen. Ich kann weder die Breite oder Höhe des Artikels noch die Breite oder Höhe des Behälters vorhersagen. Ich kann auch nicht vorhersagen, wie viele Spalten hineinpassen oder wie breit die Spalten sein sollten. Ich möchte, dass der Browser die Elemente in der maximalen Anzahl von Spalten anordnet, ohne die Breite des Containers zu überschreiten, und gleichzeitig die Höhe des Containers minimiert.

Das hat das Problem gelöst, aber gibt es einen besseren Weg? Kann dies ohne die Verwendung von jQuery erreicht werden? Kann es so gemacht werden, dass ältere Browser es richtig anzeigen (vielleicht indem man es in Zeilen statt in Spalten anordnet)?

<style>
#wrapper {
    Spaltenbreite: 100px; /* jQuery ändert diesen Wert */
    Polsterung: 20px;
    Rand: 2 Pixel durchgehend blau;
}
.Artikel {
    Polsterung: 50px;
    Rand: 2 Pixel durchgehend grün;
}
</style>
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Ermittelt die maximale Breite der untergeordneten Elemente.
var maxWidth = 0;
jQuery('#wrapper .item').each(function() {
    var width = jQuery(this).outerWidth(true);
        if (width > maxWidth) {
            maxWidth = Breite;
        }
    });
// Die Spaltenbreite des Wrappers auf die maximale Breite setzen.
jQuery('#wrapper').css('column-width', maxWidth + 'px');
</script>

Answer 1

你可以使用网格来实现这个

#wrapper {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 20px;
    grid-template-columns: repeat(9, 1fr);   //将9更改为列数
}