Rumah  >  Artikel  >  hujung hadapan web  >  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

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
Barbara Streisandasal
2024-10-25 11:46:02911semak imbas

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!

Kenyataan:
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