CSS를 사용하여 가변 높이 Div의 원활한 다중 행 레이아웃을 어떻게 만들 수 있습니까?

CSS에서 가변 높이를 갖는 부동 Div

문제 설명

표시하는 것이 목표입니다. 고정된 너비를 가진 상위 컨테이너 내에서 다양한 높이를 가진 무한한 수의 div. 제공된 이미지에 표시된 것처럼 div는 행으로 원활하게 흘러야 합니다. 그러나 CSS 부동 또는 인라인 블록 표시를 사용하면 원하는 레이아웃을 방해하는 높이 불일치가 발생합니다.

해결책

안타깝게도 순수 CSS만 사용하여 이 레이아웃을 구현하는 것은 불가능합니다. 모든 주요 브라우저에서 가능합니다. 플로팅 div 또는 인라인 블록 디스플레이와 같은 기존 솔루션은 예측할 수 없는 div 높이로 인해 문제에 직면합니다.

jQuery Masonry

이 문제를 해결하려면 다음을 수행하는 것이 좋습니다. 사용자 정의 가능한 구성으로 반응형 레이아웃 관리를 용이하게 하는 강력한 JavaScript 라이브러리인 jQuery Masonry의 기능을 활용하세요. Masonry는 div의 높이를 동적으로 분석하여 각 행 내에서 동일한 높이를 유지하면서 자동으로 열과 행으로 배열하여 컨테이너 내 공간 활용을 최적화합니다.

예

처음에는 결함이 있는 CSS 접근 방식으로 문제를 해결하려고 시도하는 제공된 CSS 및 HTML 코드를 고려하십시오. 아래와 같이 jQuery Masonry를 통합하면 높이 가변성을 효과적으로 해결하고 원하는 레이아웃을 얻을 수 있습니다.

<script src="masonry.pkgd.min.js"></script>
<script>
    $(function() {
        $('#holder').masonry({
            itemSelector: '.box',
            columnWidth: 100
        });
    });
</script>

Masonry를 활용하면 div가 높이를 자율적으로 조정하여 깨끗하고 미학적으로 만족스러운 그리드를 얻을 수 있습니다. 레이아웃처럼요. 이 솔루션은 순수한 CSS 접근 방식과 관련된 수동 픽셀 조정 및 브라우저 호환성 문제를 제거합니다.

위 내용은 CSS를 사용하여 가변 높이 Div의 원활한 다중 행 레이아웃을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!