Bagaimanakah Saya Boleh Membuat Div Induk Berkembang Secara Automatik agar Sesuai dengan Ketinggian Kandungan Anaknya Semasa Mencegah Bar Skrol Mendatar?

Memperluas Div Ibu Bapa untuk Menampung Ketinggian Kanak-kanak

Dalam pembangunan web, selalunya perlu untuk mencipta elemen induk yang berkembang agar sesuai dengan ketinggian elemen anak mereka. Senario ini timbul apabila bekerja dengan kandungan dinamik dan reka bentuk responsif di mana ketinggian elemen kanak-kanak turun naik.

Contoh biasa ialah reka letak dua lajur di mana div kanak-kanak menentukan ketinggian div induk. Dengan mengembangkan div induk sewajarnya, anda memastikan bahawa keseluruhan kandungan kelihatan tanpa bar skrol mendatar.

Untuk mencapai ini, tetapkan sifat limpahan div induk kepada auto. Ini membolehkan ibu bapa berkembang secara menegak apabila kandungan kanak-kanak berkembang.

#parent {
  overflow: auto;
}

Isu Bar Tatal Mendatar

Jika lebar kandungan kanak-kanak melangkaui tetingkap penyemak imbas, ibu bapa div dengan limpahan: auto akan memperkenalkan bar skrol mendatar. Untuk mengelakkan ini, bar skrol harus ditambah pada peringkat halaman.

Penyelesaian 1: Limpahan pada Induk

Untuk penyemak imbas tertentu, tetapan overflow-x: hidden; pada div induk boleh menghapuskan bar skrol mendatar sambil masih membenarkan induk berkembang secara menegak.

#parent {
  overflow: auto;
  overflow-x: hidden;
}

Penyelesaian 2: Ciri Paparan

Sebagai alternatif, anda boleh menggunakan paparan hartanah untuk mencipta susun atur seperti jadual. Tetapkan sifat paparan div induk kepada jadual dan sifat paparan div anak kepada baris jadual. Pendekatan ini memastikan bahawa ibu bapa berkembang untuk menampung barisnya (div anak) tanpa membuat bar skrol mendatar.

#parent {
  display: table;
}

#childRightCol, #childLeftCol {
  display: table-row;
}

Penyelesaian ini menyediakan cara yang berkesan untuk mengembangkan div induk berdasarkan ketinggian elemen anaknya, sambil menghalang bar skrol mendatar yang tidak diingini pada peringkat induk.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Induk Berkembang Secara Automatik agar Sesuai dengan Ketinggian Kandungan Anaknya Semasa Mencegah Bar Skrol Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!