可變列數的寬度未知

Question

我想在列中排列一些項目。我無法預測項目的寬度或高度，也無法預測容器的寬度或高度。我也無法預測可以容納多少列或列的寬度應該是多少。我希望瀏覽器在不超過容器寬度的情況下，將項目排列在最大數量的列中，同時最小化容器的高度。

這個解決了問題，但是否有更好的方法？可以不使用jQuery來實作嗎？可以以一種老舊瀏覽器也能正常顯示的方式來實現嗎（也許將其排列在行中而不是列中）？

<style>
#wrapper {
    column-width: 100px; /* jQuery將更改此值 */
    padding: 20px;
    border: 2px solid blue;
}
.item {
    padding: 50px;
    border: 2px solid green;
}
</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>
// 取得子元素的最大寬度。
var maxWidth = 0;
jQuery('#wrapper .item').each(function() {
    var width = jQuery(this).outerWidth(true);
        if (width > maxWidth) {
            maxWidth = width;
        }
    });
// 將包裝器的列寬度設定為最大寬度。
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更改为列数
}