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></pre</pre ;<br></p>Dalam senario ini, setiap pasangan 'child_div_1' dan 'child_div_2' perlu diletakkan bersebelahan.<p></p><p>Penyelesaian Menggunakan Blok Sebaris<strong></strong> </p>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.<p></p><pra></p>
<p>.child_div_1, .child_div_2 {<br> paparan: inline-block;<br>}<br>

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!