Bagaimana Mengendalikan Bekas Runtuh Apabila Menggunakan `display: inline-block` dan `position: absolute`?

Elemen Kedudukan dengan Paparan dan Kedudukan Campuran

Gabungan paparan:sebaris-blok dan kedudukan:mutlak dalam CSS boleh membawa kepada tingkah laku yang tidak dijangka . Apabila sesuatu elemen diletakkan secara mutlak, ia berkelakuan seolah-olah ia dialih keluar daripada aliran kandungan biasa dan elemen yang mengandunginya tidak mengetahui ketinggiannya.

Kedudukan Sebaris lwn. Mutlak

display:inline-block membenarkan elemen mengalir secara mendatar bersama elemen lain, manakala position:absolute mengalih keluar elemen daripada aliran dan meletakkannya mengikut sifat atas, bawah, kiri dan kanan.

Isu dengan Kedudukan Mutlak

Dalam kod yang disediakan, kedudukan:elemen mutlak (.elemen-kanan-b) mengeluarkannya daripada aliran dan mengeluarkannya daripada pertimbangan untuk pengiraan ketinggian keseluruhan bekas .bahagian. Akibatnya, bekas tidak mempunyai ketinggian yang wujud dan runtuh kepada sifar.

Penyelesaian

1. Tetapkan Ketinggian Bekas: Jika kedudukan :mutlak adalah penting, tetapkan ketinggian bekas .section secara manual untuk mengelakkannya daripada runtuh.
2. Pilihan Kedudukan Alternatif: Jika kedudukan mutlak tidak begitu diperlukan, pertimbangkan untuk menggunakan float atau melekit sebaliknya . Kedua-duanya membenarkan elemen meletakkan kedudukannya sendiri berbanding elemen lain tanpa menjejaskan reka letak.
3. Sekat Sebaris dengan Padding: Untuk berbilang lajur bersarang dengan kedudukan tetap, tetapkan paparan semua elemen bersarang untuk dipaparkan :sekat sebaris dan gunakan padding kiri pada lajur berikutnya untuk mencipta kesan lekukan yang diingini.

Contoh Khusus untuk Lajur Bersarang

Untuk mencapai lajur bersarang dengan tetap kedudukan, ubah suai CSS seperti berikut:

<code class="css">.section span {
  display: inline-block;
}
.element-left {
  width: 200px;
}
.element-right {
  width: 100px;
}
.indent-1 {
  padding-left: 10px;
}
.indent-2 {
  padding-left: 20px;
}</code>

Atas ialah kandungan terperinci Bagaimana Mengendalikan Bekas Runtuh Apabila Menggunakan `display: inline-block` dan `position: absolute`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!