jQuery Masonry를 사용하여 CSS에서 가변 높이 부동 Div를 어떻게 만들 수 있습니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

jQuery Masonry를 사용하여 CSS에서 가변 높이 부동 Div를 어떻게 만들 수 있습니까?

Linda Hamilton

Dec 17, 2024 pm 05:40 PM

How Can I Create Variable-Height Floating Divs in CSS Using jQuery Masonry?

CSS에서 가변 높이 플로팅 Div 만들기: 종합 가이드

CSS에서 가변 높이 플로팅 div를 구현하는 것은 중요한 과제입니다. 부동 소수점 또는 디스플레이 활용 시도: 인라인 블록은 본질적인 한계로 인해 실패한 것으로 입증되었습니다.

기존 접근 방식의 한계

부동 소수점: 플로팅 div는 수평으로만 나란히 정렬할 수 있으므로 변수가 있는 경우 행이 고르지 않게 됩니다. heights.
디스플레이: Inline-Block: 인라인 블록 요소는 자동으로 새 줄로 줄바꿈할 수 없으므로 더 큰 div가 상위 컨테이너의 경계를 넘어 확장됩니다.

대체 솔루션: jQuery Masonry

이러한 문제를 극복하려면 제한 사항이 있기 때문에 널리 사용되는 솔루션은 jQuery Masonry입니다. 이 JavaScript 플러그인은 최소 열 너비를 동적으로 계산하고 가장 높은 열의 높이를 기준으로 div 배열을 최적화합니다. 결과적으로 수동 픽셀 조정이나 복잡한 계산 없이 다양한 높이의 div가 열에 아름답게 정렬됩니다.

구현

다음 단계에서는 jQuery Masonry를 활용하는 방법을 보여줍니다.

HTML에 jQuery 및 jQuery Masonry 포함 문서.
상위 컨테이너에 CSS 스타일을 추가하여 너비와 표시 속성을 정의합니다.
Masonry 플러그인을 사용하여 상위 컨테이너에서 Masonry를 초기화하고 이를 컨테이너의 ID 또는 클래스 인수로 전달합니다. .

예시 코드

<head>
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</head>
<body>
  <div>

로그인 후 복사

JQuery Masonry를 활용하면 개발자는 CSS에서 가변 높이 부동 div를 손쉽게 구현하여 요소 높이에 관계없이 우아하고 반응성이 뛰어난 레이아웃을 보장할 수 있습니다.

위 내용은 jQuery Masonry를 사용하여 CSS에서 가변 높이 부동 Div를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.