Lebar tidak diketahui untuk bilangan lajur yang berubah-ubah

Question

Saya mahu menyusun beberapa item dalam lajur. Saya tidak dapat meramalkan lebar atau tinggi item, mahupun lebar atau tinggi bekas. Saya juga tidak dapat meramalkan berapa banyak lajur yang akan muat atau berapa lebar lajur yang sepatutnya. Saya mahu penyemak imbas menyusun item dalam bilangan maksimum lajur tanpa melebihi lebar bekas, sambil meminimumkan ketinggian bekas.

Ini menyelesaikan masalah, tetapi adakah cara yang lebih baik? Bolehkah ini dicapai tanpa menggunakan jQuery? Bolehkah ia dilakukan dengan cara pelayar lama akan memaparkannya dengan betul (mungkin dengan menyusunnya dalam baris dan bukannya lajur)?

<style>
#pembungkus {
    lebar lajur: 100px /* jQuery akan menukar nilai ini */
    padding: 20px;
    sempadan: 2px biru pepejal;
}
.item {
    padding: 50px;
    sempadan: 2px hijau pepejal;
}
</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>
<skrip>
// Dapatkan lebar maksimum elemen anak.
var maxWidth = 0;
jQuery('#wrapper .item').setiap(fungsi() {
    var width = jQuery(this).outerWidth(true);
        if (lebar > maxWidth) {
            maxWidth = lebar;
        }
    });
// Tetapkan lebar lajur pembalut kepada lebar maksimum.
jQuery('#wrapper').css('column-width', maxWidth + 'px');
</script>

Answer 1

Anda boleh menggunakan grid untuk mencapai ini

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