Bagaimana untuk Membuat Div Berkembang Secara Dinamik agar Sesuai dengan Kandungannya?

Cara Mencapai Div Ketinggian Dinamik dengan Kandungan Dinamik

Apabila berhadapan dengan DIV bersarang yang memerlukan bekas utama berkembang secara menegak untuk menampung kandungannya , adalah penting untuk menangani isu tersebut. Begini cara untuk menyelesaikan masalah ini:

Punca utama ketinggian bekas utama kekal statik ialah terapung DIV dalam. Dalam CSS, elemen terapung mengabaikan kandungan di bawahnya, yang membawa kepada kekurangan pertumbuhan menegak. Untuk menyelesaikan masalah ini, elemen "jelas" adalah penting.

Kaedah Pembetulan Jelas:

1. Masukkan
   elemen dengan kelas "jelas" sebelum penutup

daripada DIV utama (#main_content).

Tentukan peraturan CSS berikut:

<code class="css">.clear { clear: both; }</code>

Dengan memaksa "kosongkan", penyemak imbas memahami bahawa ia seharusnya tidak lagi mengabaikan kandungan selepas unsur terapung, menyelesaikan isu tersebut.

Flexbox Alternatif:

Penyelesaian yang lebih moden melibatkan penggunaan Flexbox:

1. Gunakan paparan: sifat lentur pada bekas utama untuk mewujudkan reka letak lentur.
2. Takrifkan arah lentur sebagai "lajur" untuk mengorientasikan reka letak secara menegak.
3. Tetapkan lentur: 1 pada bahagian yang mewakili kandungan utama, membolehkan ia berkembang secara menegak sambil menduduki baki ruang yang tersedia.

Pendekatan Flexbox ini menyediakan penyelesaian yang lebih mantap dan dinamik untuk mengendalikan kandungan yang berbeza-beza ketinggian.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Berkembang Secara Dinamik agar Sesuai dengan Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!