CSS와 jQuery를 사용하여 다양한 높이의 div가 있는 반응형 열 레이아웃을 어떻게 얻을 수 있나요?

가변 높이를 갖는 CSS 부동 Div

컨테이너의 div를 정렬하기 위해 CSS 부동 Div를 사용하면 다양한 요소를 처리할 때 종종 문제가 발생합니다. 높이. 제공된 예에서 볼 수 있듯이 높이가 다를 때 열의 부동 div가 깨집니다.

CSS 제한 사항:

안타깝게도 이 문제를 완벽하게 해결하는 순수한 CSS 솔루션은 없습니다. 모든 브라우저에서 사용 가능합니다.

• Float는 정렬 및 문제를 일으킬 수 있습니다. 겹칩니다.
• 인라인 블록 요소는 더 큰 요소를 적절하게 둘러싸지 않습니다.
• 절대 위치 지정을 사용하려면 수동 픽셀 조정이 필요하며 이는 동적 콘텐츠에는 실용적이지 않을 수 있습니다.

솔루션: jQuery Masonry

이 시나리오에 권장되는 솔루션 jQuery Masonry 플러그인을 사용하는 것입니다. 이 플러그인은 컨테이너 내의 요소를 지능적으로 배열하여 가변 높이를 수용하도록 행과 열을 자동으로 조정합니다.

구현:

1. jQuery Masonry 라이브러리 포함 당신의 프로젝트:

   <script src="masonry.pkgd.js"></script>

   로그인 후 복사

2. 대상 컨테이너에서 Masonry 초기화:

   $('#container').masonry();

   로그인 후 복사

Masonry를 사용하면 이제 제공한 코드가 올바르게 정렬됩니다. 원하는 대로 높이에 관계없이 열의 div를 만듭니다. 다양한 콘텐츠가 포함된 유연한 레이아웃을 위한 안정적인 솔루션을 제공합니다.

위 내용은 CSS와 jQuery를 사용하여 다양한 높이의 div가 있는 반응형 열 레이아웃을 어떻게 얻을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!