Bagaimanakah Saya Boleh Membetulkan Reka Letak yang Dipecahkan oleh Elemen Terapung dengan Ketinggian Berbeza?

Elemen Terapung dengan Reka Letak Pecah Ketinggian Berbeza

Apabila bekerja dengan elemen terapung ketinggian berubah-ubah, mengekalkan reka letak yang bersih boleh menjadi satu cabaran. Satu senario sedemikian ialah apabila sesetengah elemen lebih tinggi daripada yang lain, menyebabkan adik-beradik seterusnya beralih daripada penjajaran.

Untuk menangani isu ini, CSS menawarkan penyelesaian yang bijak:

Peraturan CSS untuk Menjajarkan Elemen Terapung

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

Peraturan ini mengarahkan penyemak imbas untuk kosongkan elemen terapung setiap tiga elemen, bermula dengan yang pertama. Dalam erti kata lain:

• Selepas elemen pertama, keempat dan ketujuh, pelampung dikosongkan, membolehkan adik-beradik seterusnya memulakan baris baharu.
• Ini memastikan baris kedua elemen sejajar terus di bawah tiga yang pertama, tanpa mengira unsur tersebut ketinggian.

Contoh

Pertimbangkan HTML dan CSS yang disediakan:

<figure> // Figure 1
    ...
</figure>
<figure> // Figure 2
    ...
</figure>
<figure> // Figure 3
    ...
</figure>
<figure> // Figure 4
    ...
</figure>
<figure> // Figure 5
    ...
</figure>
<figure> // Figure 6
    ...
</figure>

figure {
    width: 30%;
    float: left;
    ...
}

Dengan menambahkan clear: left rule :

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

Susun atur diperbetulkan dan baris kedua rajah dijajarkan di bawah tiga pertama:

[Imej: Reka letak yang diperbetulkan dengan baris kedua angka yang dijajarkan di bawah tiga yang pertama]

Kesimpulan

Menggunakan peraturan yang jelas: kiri menyediakan cara yang elegan dan cekap untuk memastikan unsur terapung dengan ketinggian yang berbeza-beza sejajar dengan betul, mengekalkan reka letak yang bersih dan teratur.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Reka Letak yang Dipecahkan oleh Elemen Terapung dengan Ketinggian Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!