Bagaimana untuk Menjajarkan Div Tidak Bersarang Bersebelahan Menggunakan Inline-Block?

Menjajarkan Div Tidak Bersarang Bersebelahan

Apabila bekerja dengan div tidak bersarang, mungkin sukar untuk meletakkannya di sebelah antara satu sama lain. Sama seperti situasi yang diterangkan dalam soalan:

<div id="parent_div_1">
<br> <div class="child_div_1"></div>
<br> <div class="child_div_2"></div>
<br>
</div><p></p><div id="parent_div_2">
<br> <div class="child_div_1"></div>
<br> <div class="child_div_2"></div>
<br>
</div><p></p><div id="parent_div_3"> 🎜> <div class="child_div_1"></div>
<br> <div class="child_div_2"></div>
<br>
</div><br>

;
Dalam senario ini, setiap pasangan 'child_div_1' dan 'child_div_2' perlu diletakkan bersebelahan.

Penyelesaian Menggunakan Blok Sebaris

Div ialah elemen blok secara lalai, bermakna ia menduduki lebar penuh yang tersedia. Untuk menyelesaikan isu ini, kami boleh menggunakan 'display:inline-block;' harta benda.

.child_div_1, .child_div_2 {
paparan: inline-block;
}

Dengan ' inline-block,' div akan memaparkan sebaris tanpa mengganggu aliran elemen. Walau bagaimanapun, ia tetap akan bertindak sebagai elemen blok.

Faedah Blok Sebaris

Lebih mudah digunakan berbanding dengan apungan
• Memberikan lebih fleksibiliti dalam susun atur dan penjajaran
• Membenarkan kawalan tepat ke atas saiz dan jarak elemen

Untuk butiran lanjut dan penjelasan yang lebih komprehensif, rujuk tutorial yang disediakan di http://learnlayout .com/inline-block.html.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Div Tidak Bersarang Bersebelahan Menggunakan Inline-Block?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!