可変数の列の幅が不明です

Question

いくつかの項目を列に配置したいと考えています。アイテムの幅や高さ、コンテナの幅や高さを予測することはできません。また、収まる列の数や列の幅をどれくらいにすべきか予測することもできません。ブラウザーには、コンテナーの高さを最小限に抑えながら、コンテナーの幅を超えずに最大数の列に項目を配置するようにしたいと考えています。

これで問題は解決しましたが、もっと良い方法はありますか?これはjQueryを使わずに実現できるのでしょうか？古いブラウザでも適切に表示できるようにすることはできますか (列ではなく行に配置するなど)。

<style>
#ラッパー {
    column-width: 100px; /* jQuery はこの値を変更します */
    パディング: 20px;
    境界線: 2 ピクセルの青一色。
}
。アイテム {
    パディング: 50ピクセル;
    境界線: 2 ピクセルの実線の緑色。
}
</スタイル>
<div id="ラッパー">
<div class="item">1</div>
<div class="item">2</div>
<div class="アイテム">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>
<スクリプト>
// 子要素の最大幅を取得します。
var maxWidth = 0;
jQuery('#wrapper .item').each(function() {
    var width = jQuery(this).outerWidth(true);
        if (幅 > maxWidth) {
            maxWidth = 幅;
        }
    });
// ラッパーの列幅を最大幅に設定します。
jQuery('#wrapper').css('column-width', maxWidth 'px');
</script>

Answer 1

これを実現するにはグリッドを使用できます

リーリー