Bagaimana Saya Boleh Membuat Ibu Bapa `` Kembangkan Secara Menegak untuk Memadankan Elemen Anaknya?-tutorial css-php.cn

How Can I Make a Parent `` Expand Vertically to Fit its Child Elements?

Meluaskan Ibu Bapa

Menegak untuk Menampung Elemen Anaknya

Dalam HTML, selalunya perlu mempunyai elemen induk yang melaraskan ketinggiannya secara dinamik agar sesuai dengan ketinggian gabungan elemen anaknya. Contohnya, ibu bapa

mungkin mengandungi dua

elemen kanak-kanak, setiap satu dengan kandungan yang berbeza-beza. Secara lalai, induk

hanya akan mengambil ketinggian sebanyak anak yang paling tinggi. Walau bagaimanapun, adalah mungkin untuk mengubah suai CSS induk

untuk membolehkan pengembangan menegak berdasarkan ketinggian anak-anaknya.

Untuk mencapai ini, peraturan CSS berikut boleh digunakan pada induk

overflow: auto;

Salin selepas log masuk

Peraturan ini mengarahkan penyemak imbas untuk menambah bar skrol menegak secara automatik pada induk

jika kandungannya melebihi ketinggian yang ada. Akibatnya, ibu bapa

akan mengembang secara menegak untuk menampung peningkatan ketinggian elemen anaknya.

Isu dan Penyelesaian Bar Skrol Mendatar

Dalam contoh yang diberikan, disebutkan bahawa jika kandungan anak melebihi lebar tetingkap penyemak imbas, CSS semasa memperkenalkan bar skrol mendatar pada induk

. Untuk menyelesaikan masalah ini dan mengalihkan bar skrol ke peringkat halaman, sifat CSS berikut boleh ditambah pada tag:

body {
  overflow-x: auto;
}

Salin selepas log masuk

Ini akan mencipta bar skrol mendatar pada peringkat halaman, membenarkan pengguna menatal secara mendatar jika kandungan kanak-kanak melebihi lebar tetingkap penyemak imbas.

Penyelesaian Alternatif Menggunakan Jadual Paparan

Satu lagi pendekatan untuk mencapai pengembangan menegak induk

ialah menggunakan sifat paparan "jadual" untuk induk dan sifat paparan "baris jadual" untuk elemen anak. Ini mewujudkan struktur seperti jadual di mana induk

bertindak sebagai bekas meja dan kanak-kanak

s bertindak sebagai baris jadual. Dalam pendekatan berasaskan jadual ini, ketinggian

induk akan melaraskan secara automatik agar sesuai dengan ketinggian gabungan elemen anaknya.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Ibu Bapa `` Kembangkan Secara Menegak untuk Memadankan Elemen Anaknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Bagaimanakah Saya Boleh Kawal Ketinggian Sel Jadual Apabila Kandungan Melebihi Dimensi Sel? Artikel seterusnya：Mengapa Pembolehubah CSS Saya Tidak Beranimasi?

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