Bagaimanakah Saya Boleh Mengelakkan Pertindihan Elemen Terapung dengan Ketinggian Berbeza?

Elemen Terapung dengan Ketinggian Berbeza: Mengelakkan Anjakan Adik Beradik

Elemen terapung menawarkan kaedah yang mudah untuk menjajarkan kandungan secara mendatar. Walau bagaimanapun, apabila elemen ini mempunyai ketinggian yang berbeza-beza, ia boleh membawa kepada isu reka letak yang tidak dijangka. Dalam kes ini, elemen yang lebih tinggi mungkin menghalang adik-beradik seterusnya daripada menjajarkan dengan betul.

Untuk menangani masalah ini, CSS menyediakan beberapa teknik. Satu pendekatan sedemikian memanfaatkan pemilih nth-of-type() untuk mengenal pasti elemen tertentu berdasarkan kedudukannya dalam urutan. Dalam contoh ini, kami boleh menggunakan peraturan :nth-of-type(3n 1) untuk menggunakan penggayaan khusus pada elemen pertama setiap set ketiga elemen terapung.

Dengan menambahkan sifat CSS ini, kami mentakrifkan bahawa setiap elemen terapung ketiga harus mengosongkan terapung sebelumnya, memastikan baris kedua sejajar di bawah yang pertama:

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

Teknik ini secara berkesan menetapkan semula gelagat terapung untuk elemen yang ditetapkan, membolehkan mereka memulakan baris baharu, dengan itu menyelesaikan isu pertindihan.

Untuk menggambarkan ini dalam tindakan, lawati contoh JSFiddle yang dikemas kini: [](https://jsfiddle.net/ KatieK/5Upbt/).

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengelakkan Pertindihan Elemen Terapung dengan Ketinggian Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!