masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Membuat Div Berkembang Secara Dinamik agar Sesuai dengan Kandungannya?

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

Barbara Streisand

Lepaskan： 2024-11-08 22:42:02

asal

180 orang telah melayarinya

How to Make a Div Expand Dynamically to Fit Its Content?

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:

Masukkan
elemen dengan kelas "jelas" sebelum penutup

daripada DIV utama (#main_content).

Tentukan peraturan CSS berikut:

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

Salin selepas log masuk

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:

Gunakan paparan: sifat lentur pada bekas utama untuk mewujudkan reka letak lentur.
Takrifkan arah lentur sebagai "lajur" untuk mengorientasikan reka letak secara menegak.
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!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Memastikan Bar Sisi Tetap pada Tatal dalam Fluid Bootstrap 2.0? Artikel seterusnya：Mengapa Peratusan Ketinggian Tidak Berfungsi Seperti Yang Dijangkakan dalam Lajur Flexbox?

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2194

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2341

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1963

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...