Bagaimanakah Saya Boleh Menjajarkan Elemen Div Bersebelahan?

Jajarkan

elemen sebelah menyebelah

Tugas menyelaraskan

elemen bersebelahan mungkin kelihatan remeh, tetapi terdapat banyak pendekatan untuk mencapainya.

Perkataan di atas apungan: kiri...

...dan mengapa ia berlaku bukan selalu pilihan terbaik.

Menggunakan apungan: kiri boleh menyebabkan akibat yang tidak diingini pada elemen lain, selalunya memerlukan penggunaan a clearfix.

Kaedah biasa untuk penjajaran mendatar

Berikut ialah beberapa cara yang paling biasa untuk menjajarkan elemen sebelah-menyebelah:

display:inline-block

Kaedah ini disokong secara meluas dan membolehkannya mudah penjajaran.

Nota: sebarang ruang kosong antara elemen akan kekal. Untuk mengalih keluar ruang, hilangkan ruang antara

tag.

display:flex

Kaedah ini memberikan lebih kawalan ke atas reka letak, termasuk keupayaan untuk menentukan bahagian ruang yang diduduki oleh setiap elemen.

paparan:inline-flex

Serupa dengan paparan:flex, tetapi bertujuan untuk elemen sebaris.

paparan:grid

Kaedah ini sesuai untuk reka letak yang kompleks dan menawarkan kawalan berbutir ke atas kedudukan elemen.

Demo

Teroka dan mencuba kaedah ini pada Codepen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Elemen Div Bersebelahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!