Bagaimana untuk Mengekalkan Keterlihatan Elemen dalam Bekas Tersembunyi Limpahan Semasa Memelihara Reka Letak?

Mengekalkan Keterlihatan Elemen dalam Bekas Tersembunyi Limpahan

Dalam CSS, menetapkan limpahan:tersembunyi pada bekas induk membolehkannya berkembang berdasarkan ketinggian anak mereka yang terapung. Walau bagaimanapun, ciri ini disertakan dengan pengehadan, khususnya penutupan kanak-kanak dalam bekas.

Masalah timbul apabila pengguna ingin mengekalkan pemusatan kiri/kanan bekas dengan kanak-kanak terapung sambil mengekalkan keterlihatan elemen di luar bekas. Menggunakan limpahan:visible mengalih keluar isu penyamaran tetapi mengganggu aliran reka letak.

Penyelesaian 1: Menggunakan Clearfix

Penyelesaian adalah dengan memanfaatkan teknik clearfix, yang mensimulasikan dengan berkesan tingkah laku pemeliharaan susun atur limpahan:tersembunyi tanpa menutup kanak-kanak. Berikut ialah kod CSS:

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

Gunakan kelas clearfix pada bekas induk dan alih keluar overflow:hidden. Ini memastikan reka letak dipelihara semasa kanak-kanak kekal kelihatan.

Penyelesaian 2: Mengekalkan Reka Letak Adik Beradik Terapung dengan Limpahan-Kelihatan

Pendekatan alternatif ialah menggunakan limpahan: boleh dilihat dan meletakkan elemen kanak-kanak secara strategik di luar bekas menggunakan kedudukan mutlak. Walau bagaimanapun, untuk mengekalkan aliran susun atur seperti apungan adik beradik, langkah berikut adalah perlu:

1. Tetapkan elemen anak kepada kedudukan: mutlak.
2. Kira kedudukan elemen anak yang betul berdasarkan lebar ibu bapa dan kedudukan adik-beradik.
3. Laraskan kedudukan elemen anak secara dinamik apabila saiz ibu bapa berubah untuk memastikan penjajaran dengan adik-beradik.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Keterlihatan Elemen dalam Bekas Tersembunyi Limpahan Semasa Memelihara Reka Letak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!