가변 개수의 열에 대한 너비를 알 수 없음
P粉441076405
2023-08-20 21:40:19
<p>일부 항목을 열로 정렬하고 싶습니다. 항목의 너비나 높이, 컨테이너의 너비나 높이를 예측할 수 없습니다. 또한 얼마나 많은 열이 들어갈지, 열의 너비는 어느 정도가 되어야 할지 예측할 수 없습니다. 나는 브라우저가 컨테이너의 높이를 최소화하면서 컨테이너의 너비를 초과하지 않고 최대 열 수로 항목을 정렬하기를 원합니다. </p>
<p>이렇게 하면 문제가 해결되었지만 더 좋은 방법이 있을까요? jQuery를 사용하지 않고도 이를 달성할 수 있나요? 이전 브라우저에서 올바르게 표시되도록(열 대신 행으로 배열하여) 수행할 수 있습니까? </p>
<pre class="brush:php;toolbar:false;"><style>
#래퍼 {
column-width: 100px; /* jQuery는 이 값을 변경합니다 */
패딩: 20px;
테두리: 2px 단색 파란색;
}
.안건 {
패딩: 50px;
테두리: 2px 단색 녹색;
}
</스타일>
<div id="래퍼">
<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>
<스크립트>
// 하위 요소의 최대 너비를 가져옵니다.
var maxWidth = 0;
jQuery('#wrapper .item').each(function() {
var 너비 = jQuery(this).outerWidth(true);
if (너비 > 최대 너비) {
최대폭 = 너비;
}
});
// 래퍼의 열 너비를 최대 너비로 설정합니다.
jQuery('#wrapper').css('열 너비', maxWidth + 'px');
<p><br /></p>
그리드를 사용하여 이를 달성할 수 있습니다
으아아아