Rumah >hujung hadapan web >tutorial css >Bagaimana Saya Boleh Membuat Ibu Bapa `` Kembangkan Secara Menegak untuk Memadankan Elemen Anaknya?

Bagaimana Saya Boleh Membuat Ibu Bapa `` Kembangkan Secara Menegak untuk Memadankan Elemen Anaknya?

DDD
DDDasal
2024-11-23 08:56:13513semak imbas

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;

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;
}

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!

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