Bagaimanakah Saya Boleh Mencipta Susun Atur Berbilang Baris Lancar bagi Div Ketinggian Boleh Ubah dengan CSS?

Div Terapung dengan Ketinggian Boleh Ubah dalam CSS

Pernyataan Masalah

Matlamatnya adalah untuk memaparkan bilangan div yang tidak terhingga dengan ketinggian yang berbeza-beza dalam bekas induk dengan lebar tetap. Div harus mengalir dengan lancar ke dalam baris, seperti yang digambarkan dalam imej yang disediakan. Walau bagaimanapun, menggunakan apungan CSS atau paparan blok sebaris mengakibatkan percanggahan ketinggian yang mengganggu reka letak yang diingini.

Penyelesaian

Malangnya, mencapai reka letak ini menggunakan CSS tulen sahaja bukanlah boleh dilaksanakan dalam semua pelayar utama. Penyelesaian tradisional seperti div terapung atau paparan blok sebaris menghadapi cabaran disebabkan ketinggian div yang tidak dapat diramalkan.

JQuery Masonry

Untuk menyelesaikan isu ini, disyorkan untuk memanfaatkan keupayaan jQuery Masonry, perpustakaan JavaScript yang berkuasa yang memudahkan pengurusan susun atur responsif dengan konfigurasi yang boleh disesuaikan. Masonry menganalisis ketinggian div secara dinamik, menyusunnya secara automatik ke dalam lajur dan baris sambil mengekalkan ketinggian yang sama dalam setiap baris, mengoptimumkan penggunaan ruang dalam bekas.

Contoh

Pertimbangkan kod CSS dan HTML yang disediakan, yang pada mulanya cuba menyelesaikan masalah dengan pendekatan CSS yang cacat. Dengan menyepadukan jQuery Masonry seperti yang ditunjukkan di bawah, kami boleh menangani kebolehubahan ketinggian dengan berkesan dan mencapai susun atur yang diingini:

<script src="masonry.pkgd.min.js"></script>
<script>
    $(function() {
        $('#holder').masonry({
            itemSelector: '.box',
            columnWidth: 100
        });
    });
</script>

Dengan menggunakan Masonry, div melaraskan ketinggian mereka secara autonomi, menghasilkan grid yang bersih dan menyenangkan dari segi estetika- seperti susun atur. Penyelesaian ini menghapuskan penalaan piksel manual dan isu keserasian penyemak imbas yang dikaitkan dengan pendekatan CSS tulen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Susun Atur Berbilang Baris Lancar bagi Div Ketinggian Boleh Ubah dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!