Berikut ialah beberapa tajuk berasaskan soalan yang menangkap intipati artikel: * **Cara Mengelakkan Isu Pengiraan Ketinggian Apabila Menggunakan `display: inline-block` dan `position: absolute`?** * **Mengapa Ab

Barbara Streisand
Lepaskan: 2024-10-25 11:46:02
asal
910 orang telah melayarinya

Here are a few question-based titles that capture the essence of the article:

* **How to Avoid Height Calculation Issues When Using `display: inline-block` and `position: absolute`?**
* **Why Does Absolute Positioning Break Container Height Calculations

Memahami paparan CSS:inline-block dan Positioning:absolute

Apabila menggunakan display:inline-block, elemen dijajarkan secara mendatar, manakala tinggi dan lebar ditentukan oleh kandungan. Walau bagaimanapun, apabila menggunakan position:absolute, elemen dialih keluar daripada aliran biasa halaman dan diletakkan secara khusus berdasarkan koordinat yang disediakan.

Dalam contoh kod yang diberikan, elemen dengan kedudukan mutlak (elemen-kanan- b) menyebabkan isu di mana ketinggian elemen bekas yang mengandungi tidak dikira dengan betul. Ini berlaku kerana elemen yang diposisikan secara mutlak dialih keluar daripada aliran dan ketinggiannya tidak lagi dipertimbangkan semasa mengira ketinggian bekas.

Untuk menangani isu ini, satu penyelesaian ialah menetapkan ketinggian bekas secara eksplisit menggunakan CSS. Walau bagaimanapun, ini mungkin tidak diingini dalam semua kes.

Penyelesaian Alternatif tanpa Kedudukan Mutlak

Untuk mengelakkan isu yang disebutkan di atas dan mencapai reka letak yang serupa, pertimbangkan untuk menggunakan pendekatan berikut :

  • Tetapkan kedua-dua elemen (elemen-kiri dan elemen-kanan) kepada display:inline-block.
  • Tetapkan lebar tetap untuk kedua-dua elemen.

Ini akan membolehkan elemen menjajarkan secara mendatar dengan lebar terkawal, menghapuskan keperluan untuk kedudukan mutlak.

Reka Letak Bersarang dengan Lekukan

Untuk mencipta reka letak bersarang dengan lekukan , pertimbangkan untuk menggunakan penanda tambahan dan CSS:

  • Tambahkan elemen span bersarang dalam elemen-left dengan kelas seperti indent-1, indent-2, dll.
  • Gunakan padding untuk mencipta lekukan yang diingini dalam elemen rentang bersarang ini.

Pendekatan ini memberikan fleksibiliti untuk mencipta reka letak bersarang dengan tahap lekukan terkawal tanpa menggunakan kedudukan mutlak.

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk berasaskan soalan yang menangkap intipati artikel: * **Cara Mengelakkan Isu Pengiraan Ketinggian Apabila Menggunakan `display: inline-block` dan `position: absolute`?** * **Mengapa Ab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!