Bagaimana untuk Menjajarkan Div Kanak-Kanak Bersebelahan Dalam Div Induk Berasingan Menggunakan Sekatan Sebaris?

Cara Menjajarkan Div Anak Bersebelahan dalam Div Induk Tidak Bersarang

Anda mempunyai dua div bersebelahan, setiap satu dalam div induk mereka sendiri. Div induk ini diulang beberapa kali. Anda ingin meletakkan setiap pasangan child_div_1 dan child_div_2 secara mendatar bersebelahan antara satu sama lain.

Untuk mencapai ini, gunakan paparan:inline-block; harta gaya pada div kanak-kanak. Sifat ini membenarkan div untuk menjajarkan sebagai elemen sebaris tanpa mengganggu aliran normal kandungan. Walaupun div akan dipaparkan bersama antara satu sama lain, mereka akan mengekalkan statusnya sebagai elemen blok.

Kaedah ini menyediakan cara yang lebih mudah untuk mencapai reka letak yang diingini berbanding dengan menggunakan apungan. Berikut ialah contoh HTML dan CSS yang diubah suai:

<code class="html"><div id="parent_div_1">
  <div class="child_div_1" style="display:inline-block;"></div>
  <div class="child_div_2" style="display:inline-block;"></div>
</div></code>

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

Untuk panduan lanjut, anda boleh merujuk kepada tutorial berikut: http://learnlayout.com/inline-block.html

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Div Kanak-Kanak Bersebelahan Dalam Div Induk Berasingan Menggunakan Sekatan Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!