Berikut ialah beberapa pilihan tajuk, bermain dengan format soalan dan menekankan masalah/penyelesaian: Langsung dan Ringkas: * Bagaimana Memusatkan Adik Beradik Tanpa Menyamarkan Kanak-Kanak dalam CSS? * Bagaimana saya boleh Mencegah

Mencapai Sibling-Centering Tanpa Menyamarkan Kanak-kanak dalam Limpahan:hidden Induk

Dalam CSS, overflow:hidden property biasanya digunakan pada induk bekas untuk menampung ketinggian anak-anak mereka yang terapung. Walau bagaimanapun, ia juga mempunyai kesan yang menarik apabila digabungkan dengan margin:auto.

Apabila bekas dengan limpahan:tersembunyi dan margin:auto mempunyai adik beradik terdahulu yang terapung, ia kelihatan bersebelahan dengan elemen terapung. Ini membolehkan peletakan berpusat antara berbilang adik beradik terapung.

Walau bagaimanapun, reka letak ini boleh terganggu jika kanak-kanak perlu kelihatan di luar bekas tanpa menutup unsur terapung. Kaedah tradisional untuk membuat bekas melimpah:visible mengabaikan reka letak terapung, manakala mengosongkan:kedua-duanya dan mengembangkan bekas mengganggu pemusatan adik-beradik.

Penyelesaian Menggunakan Clearfix

Kepada mengekalkan reka letak berpusat sambil membenarkan kanak-kanak kelihatan di luar bekas, kaedah clearfix boleh digunakan. Dengan menambahkan kelas clearfix pada induk dan mengalih keluar overflow:hidden, reka letak boleh dikekalkan tanpa menutup kanak-kanak.

CSs untuk clearfix disediakan di bawah:

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

Atas ialah kandungan terperinci Berikut ialah beberapa pilihan tajuk, bermain dengan format soalan dan menekankan masalah/penyelesaian: Langsung dan Ringkas: * Bagaimana Memusatkan Adik Beradik Tanpa Menyamarkan Kanak-Kanak dalam CSS? * Bagaimana saya boleh Mencegah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!