<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更改为列数
}