Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menyusun Div Ketinggian Boleh Ubah dalam Baris Kemas Menggunakan CSS dan JavaScript?

Bagaimanakah Saya Boleh Menyusun Div Ketinggian Boleh Ubah dalam Baris Kemas Menggunakan CSS dan JavaScript?

Susan Sarandon
Susan Sarandonasal
2024-12-15 03:16:14626semak imbas

How Can I Arrange Variable-Height Divs in Neat Rows Using CSS and JavaScript?

Div Terapung CSS pada Ketinggian Boleh Ubah

Cabarannya terletak pada menampung bilangan yang tidak terhingga div ketinggian berubah-ubah dalam induk lebar tetap, memastikan mereka menyusun diri mereka dalam barisan yang kemas seperti yang digambarkan dalam imej yang disediakan. Percubaan untuk menggunakan apungan atau ciri paparan blok sebaris telah terbukti mencabar disebabkan oleh variasi ketinggian.

Penyelesaian:

Malangnya, menyelesaikan isu ini semata-mata dengan CSS pada masa ini tidak dapat dilaksanakan dalam semua pelayar. Pendekatan terapung dan blok sebaris kedua-duanya mempunyai had. Penyelesaian berasaskan kedudukan memerlukan pelarasan piksel manual atau pergantungan pada kod sisi pelayan untuk penalaan piksel automatik.

jQuery Masonry to the Rescue:

Untuk mengendalikan situasi ini dengan berkesan, adalah disyorkan untuk menerima kuasa jQuery Masonry, perpustakaan yang direka khusus untuk mengatur dan menyusun elemen secara dinamik. Masonry secara automatik melaraskan susun atur div berdasarkan ketinggian dan ruang yang tersedia, menghasilkan susunan visual yang menarik dan responsif.

Pelaksanaan:

Untuk melaksanakan Masonry, cuma muat turun perpustakaan dan masukkannya ke dalam fail HTML anda. Kemudian, mulakan Masonry dengan bekas div anda sebagai sasaran:

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

Ini akan membolehkan Masonry menguruskan susunan div dalam bekas, memastikan ia diletakkan secara optimum tanpa mengira perbezaan ketinggiannya.

Manfaat jQuery Masonry:

  • Automatik pelarasan susun atur elemen
  • Sokongan untuk ketinggian elemen yang tidak teratur
  • Respons dinamik pada saiz semula halaman
  • Pelaksanaan yang mudah dan mesra pengguna

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Div Ketinggian Boleh Ubah dalam Baris Kemas Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn