Bagaimana untuk Membetulkan herotan Reka Letak yang Disebabkan oleh Elemen Terapung dengan Ketinggian Boleh Ubah?

Elemen Terapung dengan Ketinggian Boleh Ubah Mengherotkan Reka Letak: Pembetulan Komprehensif

Apabila unsur terapung dengan ketinggian yang berbeza-beza, adalah perkara biasa untuk menghadapi isu reka letak di tempat yang lebih tinggi elemen menghalang adik-beradik seterusnya daripada menjajarkan dengan betul. Ini boleh membawa kepada penampilan yang tidak diingini, seperti dalam contoh yang diberikan di mana barisan elemen terapung terpecah disebabkan oleh satu elemen yang memanjang.

Untuk menyelesaikan masalah ini, kami boleh menggunakan CSS untuk memastikan penjajaran yang betul. Dengan menambahkan peraturan berikut:

figure:nth-of-type(3n+1) {
    clear:left;
}

kami menyatakan bahawa setiap elemen angka ketiga harus "mengosongkan" bahagian kirinya. Ini secara berkesan menamatkan jujukan apungan dan memaksa elemen berikutnya untuk diselaraskan di bawah tiga yang pertama.

Penyelesaian ini cekap dan menarik secara visual, mengekalkan reka letak yang dimaksudkan tanpa memerlukan alatan luaran seperti JavaScript atau jQuery.

Demonstrasi Langsung

Rujuk jsFiddle yang disemak semula contoh untuk menyaksikan penjajaran lancar semua elemen rajah, tanpa mengira ketinggiannya yang berbeza-beza: http://jsfiddle.net/KatieK/5Upbt/

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan herotan Reka Letak yang Disebabkan oleh Elemen Terapung dengan Ketinggian Boleh Ubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!