Bagaimana untuk Memaparkan Div Bersebelahan Tanpa Bersarang?

Mencapai Paparan Bersebelahan Div

Apabila berurusan dengan berbilang elemen div yang sepatutnya kelihatan bersebelahan mendatar, cabaran biasa timbul, terutamanya jika ia tidak bersarang dalam diri masing-masing. Dalam kes sedemikian, membuat mereka bersebelahan boleh menjadi rumit.

Pernyataan Masalah:

Pertimbangkan struktur HTML berikut:

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div></code>

Matlamatnya ialah supaya setiap pasangan elemen child_div_1 dan child_div_2 dipaparkan sebelah menyebelah.

Penyelesaian:

Untuk mencapai matlamat ini, konsep "inline-block" mula bermain. Secara lalai, elemen div ialah elemen blok, yang bermaksud ia menduduki lebar penuh yang tersedia. Walau bagaimanapun, dengan menetapkan sifat paparan kepada sekatan sebaris, div boleh memaparkan sebaris tanpa mengganggu aliran elemen semasa masih dianggap sebagai elemen blok.

<code class="css">.child_div_1, .child_div_2 {
  display: inline-block;
}</code>

Dengan pengubahsuaian ini, div anak akan dipaparkan sebaris , menduduki ruang tanpa memanjangkan keseluruhan lebar. Ini membolehkan mereka dipaparkan sebelah menyebelah dalam div induk masing-masing.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Div Bersebelahan Tanpa Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!