Bagaimanakah saya boleh menyelaraskan elemen div bersebelahan menggunakan CSS?

Sejajarkan

Elemen Bersebelahan

Menjajarkan

elemen sebelah menyebelah adalah tugas biasa dalam pembangunan web. Terdapat beberapa kaedah berbeza yang boleh digunakan untuk mencapai matlamat ini, masing-masing mempunyai kelebihan dan keburukan tersendiri.

Apung: Kiri

< ;p>Apungan: sifat kiri ialah cara mudah untuk menjajarkan elemen sebelah menyebelah. Cuma tambahkan CSS berikut pada elemen anda:

.elemen {<br> float: left;<br>}<br>

Ini akan menyebabkan unsur terapung di sebelah kiri bekasnya. Walau bagaimanapun, terdapat beberapa pengehadan untuk menggunakan apungan: kiri:

• Ia boleh menyebabkan masalah dengan reka letak elemen lain pada halaman.< /li>
  
• Ia tidak berfungsi dengan semua penyemak imbas.

Blok Sebaris

Sifat blok sebaris adalah lebih cara yang boleh dipercayai untuk menyelaraskan elemen sebelah menyebelah. Ia berfungsi dengan menetapkan sifat paparan elemen kepada sebaris, yang bermaksud bahawa elemen akan mengalir seperti teks. Walau bagaimanapun, elemen itu juga akan mempunyai lebar dan ketinggian, jadi ia akan berkelakuan seperti elemen blok. Ini membolehkan anda menjajarkan elemen bersebelahan tanpa menyebabkan masalah dengan reka letak elemen lain pada halaman.

Untuk menggunakan blok sebaris, tambahkan CSS berikut pada elemen anda :

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

Flexbox

Flexbox ialah sistem susun atur berkuasa yang boleh digunakan untuk membuat susun atur yang kompleks dengan mudah. Ia membolehkan anda menjajarkan elemen bersebelahan, menegak atau mendatar, malah membungkusnya di sekeliling elemen lain. Untuk menggunakan Flexbox, anda perlu menambah CSS berikut pada elemen bekas anda:

.container {<br> paparan: flex;<br>}<br>< /pre></p>
<p><p>Anda kemudian boleh menambah CSS berikut pada elemen anak anda untuk menyelaraskannya bersebelahan sisi:</p></p>
<p><pra>.kanak-kanak {<br> lentur: 1;<br>}<br>

Grid< ;/h2>

Grid ialah sistem susun atur CSS yang lebih baru yang lebih berkuasa daripada Flexbox. Ia membolehkan anda membuat reka letak yang kompleks dengan mudah, dan ia mempunyai sokongan terbina dalam untuk menjajarkan elemen secara bersebelahan. Untuk menggunakan Grid, anda perlu menambah CSS berikut pada elemen bekas anda:

.container {<br> paparan: grid;<br> grid-template-columns: ulang(2, 1fr);<br>}<br>

Ini akan membuat grid dengan dua lajur. Anda kemudian boleh menambahkan elemen anak anda pada grid dan ia akan dijajarkan secara automatik bersebelahan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyelaraskan elemen div bersebelahan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn