CSS와 JavaScript를 사용하여 가변 높이 Div를 깔끔한 행으로 정렬하려면 어떻게 해야 합니까?

가변 높이의 CSS 부동 Div

문제는 고정 너비 상위 div 내에서 무한한 수의 가변 높이 div를 수용하는 것입니다. 제공된 이미지에 표시된 대로 깔끔한 행으로 정렬되도록 합니다. 부동 소수점 또는 인라인 블록 디스플레이 속성을 활용하려는 시도는 높이 변화로 인해 어려운 것으로 입증되었습니다.

해결책:

안타깝게도 CSS만으로 이 문제를 해결하는 것은 현재 불가능합니다. 모든 브라우저에서. 부동 소수점 및 인라인 블록 접근 방식에는 모두 제한이 있습니다. 위치 기반 솔루션에는 수동 픽셀 조정이 필요하거나 자동화된 픽셀 조정을 위해 서버 측 코드에 의존해야 합니다.

jQuery Masonry를 구출하세요:

이 상황을 효과적으로 처리하려면, 요소를 동적으로 구성하고 배열하기 위해 특별히 설계된 라이브러리인 jQuery Masonry의 강력한 기능을 활용하는 것이 좋습니다. Masonry는 높이와 사용 가능한 공간에 따라 div의 레이아웃을 자동으로 조정하여 시각적으로 매력적이고 반응성이 뛰어난 배열을 제공합니다.

구현:

Masonry를 구현하려면 다운로드하기만 하면 됩니다. 라이브러리를 HTML 파일에 포함시킵니다. 그런 다음 div 컨테이너를 대상으로 하여 Masonry를 초기화합니다.

var container = document.querySelector('#holder');
var mason = new Masonry(container, {});

이렇게 하면 Masonry가 컨테이너 내의 div 배열을 관리하여 높이 차이에 관계없이 최적으로 배치되도록 할 수 있습니다.

jQuery Masonry의 장점:

• 요소 자동 조정 레이아웃
• 불규칙한 요소 높이 지원
• 페이지 크기 조정에 대한 동적 반응
• 간단하고 사용자 친화적인 구현

위 내용은 CSS와 JavaScript를 사용하여 가변 높이 Div를 깔끔한 행으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!