Bagaimanakah Saya Boleh Mencapai Susun Atur Lajur Responsif dengan Div Ketinggian Berbeza Menggunakan CSS dan jQuery?

CSS Terapung Div dengan Ketinggian Boleh Ubah

Penggunaan CSS terapung untuk menyusun div dalam bekas sering memberikan cabaran apabila menangani unsur-unsur yang berbeza-beza ketinggian. Seperti yang ditunjukkan dalam contoh yang disediakan, div terapung dalam lajur pecah apabila ketinggian berbeza.

Had CSS:

Malangnya, tiada penyelesaian CSS tulen yang menyelesaikan masalah ini dengan sempurna merentas semua penyemak imbas.

• Apungan boleh menyebabkan masalah dengan penjajaran dan bertindih.
• Elemen blok sebaris tidak membalut dengan betul pada elemen yang lebih tinggi.
• Menggunakan kedudukan mutlak memerlukan penalaan piksel manual, yang boleh menjadi tidak praktikal untuk kandungan dinamik.

Penyelesaian: jQuery Masonry

Penyelesaian yang disyorkan untuk ini senario adalah menggunakan plugin jQuery Masonry. Pemalam ini bijak menyusun elemen dalam bekas, melaraskan baris dan lajur secara automatik untuk menampung ketinggian berubah-ubah.

Pelaksanaan:

1. Sertakan perpustakaan Masonry jQuery dalam awak projek:

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

   Salin selepas log masuk

2. Inisialisasikan Masonry pada bekas sasaran:

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

   Salin selepas log masuk

Menggunakan Masonry, kod yang anda berikan kini akan disusun dengan betul div dalam lajur, tanpa mengira ketinggiannya, seperti yang dikehendaki. Ia menyediakan penyelesaian yang boleh dipercayai untuk reka letak fleksibel dengan kandungan berubah-ubah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Susun Atur Lajur Responsif dengan Div Ketinggian Berbeza Menggunakan CSS dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!