<p>我想在列中排列一些項目。我無法預測項目的寬度或高度，也無法預測容器的寬度或高度。我也無法預測可以容納多少列或列的寬度應該是多少。我希望瀏覽器在不超過容器寬度的情況下，將項目排列在最大數量的列中，同時最小化容器的高度。 </p> <p>這個解決了問題，但是否有更好的方法？可以不使用jQuery來實作嗎？可以以一種老舊瀏覽器也能正常顯示的方式來實現嗎（也許將其排列在行中而不是列中）？ </p> <pre class="brush:php;toolbar:false;"><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></pre> <p><br /></p>

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