Artikel ini akan menunjukkan utiliti yang boleh digunakan untuk mengawal peletakan elemen kedudukan di atas halaman web.
Utiliti Tailwind Digunakan untuk Mengawal Penempatan Elemen Kedudukan?
Utiliti Tailwind CSS yang secara khusus berurusan dengan penempatan elemen kedudukan dalam kedua-dua paksi mendatar atau menegak ialah “ Atas | Betul | Bawah | Dibiarkan ”. Sama seperti utiliti lain, ia juga menyediakan pelbagai kelas yang boleh menetapkan elemen kedudukan di pelbagai tempat, beberapa kelas ini dinyatakan di bawah:
- inset-{placementValue}
- mula-{placementValue}
- atas-{placementValue}
- end-{placementValue}
- bawah-{placementValue}
- kiri-{placementValue}
- kanan-{placementValue}
Sekarang, mari kita dapatkan contoh praktikal untuk menggunakan beberapa kelas ini untuk pemahaman yang lebih baik.
Contoh: Penempatan Elemen Diposisikan Menggunakan Utiliti CSS Tailwind
Dalam contoh ini, utiliti yang diterangkan di atas akan digunakan untuk meletakkan elemen diposisikan di tempat yang berbeza pada halaman web, seperti ditunjukkan di bawah:
< badan kelas = 'grid grid-cols-3' >
< div kelas = 'relatif h-32 w-32 bg-oren-200 p-4 m-4 teks-pusat justify-regangan bulat' >
< div kelas = 'kiri mutlak-0 atas-0 h-16 w-16 bg-biru-400 bulat p-4' > Perkara 1 < / div >
< / div >
< div kelas = 'relatif h-32 w-32 bg-oren-200 p-4 m-4 teks-pusat justify-regangan bulat' >
< div kelas = 'inset mutlak-x-0 atas-0 h-16 bg-biru-400 bulat p-4' > Perkara 2 < / div >
< / div >
< div kelas = 'relatif h-32 w-32 bg-oren-200 p-4 m-4 teks-pusat justify-regangan bulat' >
< div kelas = 'inset mutlak-0 bg-biru-400 bulat p-4' > Perkara 3 < / div >
< / div >
< div kelas = 'relatif h-32 w-32 bg-oren-200 p-4 m-4 teks-pusat justify-regangan bulat' >
< div kelas = 'inset mutlak-y-0 kanan-0 w-16 bg-biru-400 bulat p-4' > Perkara 4 < / div >
< / div >
< div kelas = 'relatif h-32 w-32 bg-oren-200 p-4 m-4 teks-pusat justify-regangan bulat' >
< div kelas = 'bawah mutlak-0 kanan-0 h-16 w-16 bg-biru-400 bulat p-4' > Perkara 5 < / div >
< / div >
< / badan >
Penerangan kod di atas:
- Pertama, buat lima induk ' div ” dan gunakan pelbagai kelas CSS Tailwind untuk menetapkan kedudukan relatif, ketinggian, lebar, latar belakang, padding, jidar dan sebagainya.
- Seterusnya, buat ' bersarang ' div elemen ” di dalam setiap induk “div”. Peletakan akan dilakukan untuk elemen 'div' bersarang ini.
- Kemudian, gunakan kelas CSS tailwind bagi “ mutlak ”, “ h ”, “ Dalam ”, “ bg ”, ” hlm ”, dan “ bulat ” untuk menggayakan bersarang “ div ” unsur.
- Selepas itu, bermula dari div bersarang satu hingga lima, tetapkan kelas baharu “ kiri-0 atas-0 ”, “ inset-x-0 ”, “ inset-0 ”, “ sisipan-y-0 kanan-0 ”, dan “ bawah-0 kanan-0 ” masing-masing.
- Kelas ini menetapkan kedudukan elemen div bersarang di sudut kiri atas, menutup kedudukan atas, menutup seluruh ruang induk, menutup bahagian kanan dan menutup kedudukan kiri bawah masing-masing.
Selepas pelaksanaan, pratonton elemen div kelihatan seperti ini:
Output menunjukkan bahawa elemen kedudukan diletakkan pada kedudukan yang dikehendaki.
Kesimpulan
' Atas | Betul | Bawah | Dibiarkan ” Utiliti Tailwind digunakan untuk mengawal peletakan elemen di atas halaman web. Ia menggunakan beberapa kelas untuk menyasarkan setiap kedudukan dan kemudian memindahkan elemen yang dipilih di tempat itu mengikut keperluan. Kelas ini terutamanya meletakkan elemen diposisikan di kiri, kanan, bawah dan atas. Mereka boleh membantu untuk meliputi seluruh kawasan, meliputi arah tertentu seperti kiri atau atas, dan sebagainya. Artikel ini telah berjaya menerangkan utiliti yang boleh digunakan untuk mengawal peletakan elemen kedudukan.