Bagaimanakah Saya Boleh Menjajarkan Elemen DIV Bersebelahan Menggunakan HTML dan CSS?

Sejajarkan

elemen bersebelahan

Dalam usaha untuk menyelaraskan elemen bersebelahan dengan HTML dan CSS, pendekatan yang paling terkenal ialah float: left, tetapi ia bukan satu-satunya kaedah.

Berikut adalah pelbagai teknik untuk mencapai penjajaran sebelah-menyebelah, mulai dari yang digunakan secara meluas kepada yang lebih inovatif.

---

Apung

Menggunakan apungan: kiri atau kanan adalah satu kaedah. Walau bagaimanapun, berhati-hati kerana ia boleh memberi kesan kepada reka letak elemen lain.

HTML

<div>
<br> <div> B</div>
<br>
</div><br>

CSS

.float-left {<br> float : kiri;<br>}<br>

---

Paparan sebaris

paparan : inline-block membenarkan elemen diletakkan bersebelahan tanpa menjejaskan reka letak, walaupun ruang mungkin muncul di antara mereka.

HTML

B

CSS

.inline-block {<br> paparan : inline-block;<br>}<br>

Untuk menghapuskan ruang antara elemen inline-block, alih keluar ruang antara HTML tag.

---

Flexbox

Flexbox, dengan keupayaan susun atur yang berkuasa, boleh menyelaraskan elemen dengan mudah secara mendatar.

HTML

<div> <div class="flex-child">A</div>
<br> <div></div>
<br><br>CSS<br><pra>.flex-parent {<br> paparan: flex;<br>}<br>.flex- kanak-kanak {<br> lentur: 1;<br>}<br><p></p><hr><p></p><h2 id="Inline-Flexbox">Inline Flexbox</h2><p></p><p>Inline flexbox berguna untuk meletakkan elemen bersebelahan dalam barisan kandungan.</p><p></p><p>HTML<br></p><pre class="brush:php;toolbar:false"><div> <div>A</div>
<br> <div>B</div> <br>
</div><br>

CSS
.inline-flex-parent {
paparan: inline-flex;
}

---

CSS Grid

HTML

A

B

CSS
.grid-parent {
paparan: grid;
grid-template-lajur: 1fr 1fr;
}