Bagaimanakah Saya Boleh Membetulkan Lajur Tidak Sejajar Yang Disebabkan oleh Elemen Terapung Ketinggian Berbeza-beza?

Barisan Lajur Terapung Ketinggian Boleh Ubah

Apabila bekerja dengan kandungan ketinggian berubah-ubah dalam susun atur berbilang lajur, ia adalah perkara biasa untuk menghadapi isu di mana unsur yang lebih tinggi menghalang adik-beradik mereka daripada menjajarkan dengan betul. Ini boleh berlaku apabila menggunakan apungan untuk meletakkan elemen, kerana elemen yang paling tinggi akan memaksa elemen berikutnya terapung di bawahnya, memecahkan struktur lajur yang diingini.

Untuk menyelesaikannya, CSS boleh digunakan untuk mencipta garis- penjajaran garisan untuk unsur-unsur. Dengan menambahkan peraturan berikut, reka letak boleh dibetulkan tanpa menggunakan JavaScript atau jQuery:

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

Dalam peraturan ini, nth-of-type(3n 1) menyasarkan elemen pertama dalam setiap baris tiga elemen . Menerapkan clear:left pada elemen ini secara berkesan menetapkan semula konteks terapung, membenarkan elemen berikutnya dijajarkan dengan betul di bawahnya.

Pengubahsuaian CSS mudah ini memastikan elemen dalam baris kedua berbaris di bawah baris pertama, mewujudkan struktur lajur yang diingini tanpa mengira ketinggian kandungan yang berbeza-beza dalam elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Lajur Tidak Sejajar Yang Disebabkan oleh Elemen Terapung Ketinggian Berbeza-beza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!