Bagaimanakah Saya Boleh Menghalang Herotan Reka Letak Yang Disebabkan oleh Elemen Terapung Ketinggian Boleh Ubah?

Herohan Reka Letak dengan Elemen Terapung Ketinggian Boleh Ubah

Apabila bekerja dengan elemen ketinggian berubah-ubah dalam susun atur terapung, ia adalah perkara biasa untuk menghadapi situasi yang lebih tinggi elemen menolak adik-beradik seterusnya ke bawah, memecahkan grid yang dimaksudkan struktur.

Pertimbangkan contoh berikut: enam elemen rajah direka bentuk untuk membentuk dua baris tiga. Walau bagaimanapun, disebabkan ketinggian elemen yang berbeza-beza, elemen angka keempat melangkaui baris pertama, menyebabkan elemen kelima dan keenam diimbangi.

CSS yang digunakan untuk contoh ini adalah mudah:

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

Untuk menangani herotan reka letak, kami boleh memperkenalkan peraturan CSS yang secara khusus menyasarkan elemen pertama setiap baris. Dengan mengosongkan apungan kiri, kami memastikan bahawa adik-beradik berikutnya dijajarkan secara mendatar di bawah mereka.

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

Peraturan ini menyelesaikan isu penjajaran dengan memaksa elemen angka keempat untuk memulakan baris baharu. Elemen kelima dan keenam kemudiannya diletakkan dengan betul di bawah tiga yang pertama.

Reka letak contoh yang dikemas kini kini seperti yang dimaksudkan, dengan setiap baris terdiri daripada tiga elemen rajah sekata, tanpa mengira perbezaan ketinggiannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Herotan Reka Letak Yang Disebabkan oleh Elemen Terapung Ketinggian Boleh Ubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!