Bagaimana untuk membuat div dalam mengisi ruang mendatar yang tinggal selepas lebar div dalam yang lain ditetapkan secara dinamik?

Menetapkan Lebar Div Dalaman

Apabila bekerja dengan div bersarang dan kandungan fleksibel, menentukan lebar yang sesuai untuk setiap div boleh menjadi mencabar. Soalan ini meneroka teknik untuk menetapkan lebar div dalam kepada ruang mendatar yang tinggal selepas mengambil kira lebar div dalam yang lain.

Struktur HTML:

The Struktur HTML terdiri daripada div luar dan dua div dalam bersarang:

<div>

Pernyataan Masalah:

Matlamatnya adalah untuk menjadikan div #inner2 mengisi mendatar yang tinggal ruang selepas lebar #inner1 div telah ditentukan secara dinamik berdasarkan kandungannya.

Ramuan Misteri: Limpahan: Tersembunyi

Kunci untuk mencapai reka letak ini ialah penggunaan limpahan harta CSS: tersembunyi; pada div luar (#outer). Ini mengarahkan penyemak imbas untuk mengekang anak terapungnya dalam sempadannya sendiri.

HTML yang disemak:

Untuk menggunakan CSS dengan berkesan, id div hendaklah mengikut sintaks CSS yang sah:

<div>

Penyelesaian CSS:

#outer {
  overflow: hidden;
  width: 100%;
  /* Styling for illustration purposes */
  border: solid 3px #666;
  background: #ddd;
}

#inner1 {
  float: left;
  /* Styling for illustration purposes */
  border: solid 3px #c00;
  background: #fdd;
}

#inner2 {
  overflow: hidden;
  /* Styling for illustration purposes */
  border: solid 3px #00c;
  background: #ddf;
}

Keserasian Pelayar dan Kes Tepi:

Penyelesaian ini telah diuji dan disahkan berfungsi dengan betul dalam IE 6, 7, dan 8; Firefox 3.5; dan Chrome 4. Dalam IE 6, peraturan CSS tambahan menggunakan zum: 1; adalah perlu untuk memastikan div #inner2 memenuhi ruang yang tinggal.

Atas ialah kandungan terperinci Bagaimana untuk membuat div dalam mengisi ruang mendatar yang tinggal selepas lebar div dalam yang lain ditetapkan secara dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!