Bagaimana untuk Membuat Div Dalaman Mengisi Ruang Yang Selebihnya Selepas Div Lain?

Cara Menetapkan Lebar Div Dalaman kepada Baki Ruang Selepas Div Lain

Dalam xHTML dan CSS, anda mungkin menghadapi senario di mana anda perlu mempunyai berbilang div bersarang dalam div luar dengan lebar yang ditentukan 100%. Anda mahu div dalam dipaparkan dalam satu baris, dengan lebar div pertama ditentukan oleh kandungannya.

Untuk mencapai ini, anda boleh menggunakan teknik berikut:

Langkah 1: Gunakan Paparan Sebaris untuk Div ​​Bersarang

Tetapkan sifat 'paparan' bagi div bersarang kepada 'sebaris' supaya ia muncul pada baris yang sama.

Langkah 2: Tetapkan Limpahan kepada Tersembunyi untuk Div ​​Luar

Gunakan 'limpahan: tersembunyi;' ke div luar untuk memastikan elemen anaknya (div bersarang) kekal terkandung dalam lebarnya.

Langkah 3: Tetapkan Lebar kepada Auto untuk Div ​​Bersarang Pertama

Biarkan lebar div bersarang pertama (#inner1) tidak ditentukan sebagai 'auto.' Ini membolehkan ia berkembang kepada lebar yang diperlukan berdasarkan kandungannya.

Langkah 4: Tetapkan Limpahan kepada Tersembunyi untuk Div ​​Bersarang Kedua

Gunakan 'overflow: hidden;' ke div bersarang kedua (#inner2) untuk menghalangnya daripada melepasi ruang yang tinggal di div luar.

Contoh Kod:

<div>

Pertimbangan Tambahan:

Untuk keserasian IE 6, anda mungkin perlu menambah CSS tambahan menggunakan ulasan bersyarat HTML, seperti yang digariskan dalam jawapan yang disediakan.

Dengan teknik ini, div dalam akan dipaparkan sebaris, dengan div kedua melaraskan secara automatik untuk menduduki ruang yang tinggal di div luar.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Dalaman Mengisi Ruang Yang Selebihnya Selepas Div Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!