Dalam CSS Tailwind, elemen yang digantikan ialah elemen yang kandungannya digantikan oleh sumber luaran, seperti imej dan video. Kadangkala, pengguna menghadapi cabaran untuk meletakkan elemen yang diganti dalam bekas. Ini kerana elemen ini boleh melimpahi bekas jika saiznya lebih besar daripada ruang yang ada. Tailwind CSS menyediakan kelas utiliti untuk mengawal cara kandungan elemen yang diganti diletakkan dan diselaraskan dalam bekas.
Artikel ini akan menggambarkan kaedah untuk meletakkan elemen yang diganti dalam bekas dalam Tailwind CSS.
Bagaimana untuk Meletakkan Elemen yang Digantikan Dalam Bekas di Tailwind?
Untuk meletakkan elemen yang diganti dalam bekas dalam Tailwind, buat program HTML dan gunakan ' objek-
Sintaks
< unsur kelas = 'objek-
Contoh
Dalam contoh ini, kami akan membuat bekas dan menggunakan semua ' objek- ” (imej) elemen untuk menentukan kedudukannya yang diganti dalam bekas:
< badan >
< div kelas = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-antara' >
< img kelas = 'objek-tiada objek-kiri-atas w-24 j-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tiada objek-kiri w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tiada objek-kiri-bawah w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tiada objek-atas w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tiada pusat-objek w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tiada objek-bawah w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tiada objek-kanan-atas w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tiada objek-kanan w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img kelas = 'objek-tiada objek-kanan-bawah w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
badan >
Di sini, dalam elemen
- “ bg-langit-300 ” kelas menetapkan warna latar belakang bekas ke langit.
- “ grid ” kelas membolehkan susun atur grid.
- “ grid-rows-3 ” kelas menetapkan nombor baris dalam grid kepada 3.
- “ grid-flow-col ” kelas mentakrifkan aliran item grid dalam lajur.
- “ m-5 ” kelas menambah 5 unit jidar di sekeliling bekas.
- “ ruang-y-4 kelas ” menambah jarak menegak 4 unit antara elemen
kanak-kanak dalam bekas.
- “ p-4 ” kelas menambah 4 unit padding pada kandungan di dalam bekas.
- “ justify-antara ” kelas menjajarkan elemen anak dalam bekas dan mengagihkannya secara sama rata.
Dalam elemen
:
- “ objek-tiada ” kelas tidak menggunakan sebarang kedudukan pada elemen dan memaparkan elemen pada kedudukan lalainya dalam bekas.
- “ objek-kiri-atas kelas ” meletakkan elemen
ke sudut kiri atas bekasnya.
- “ objek-kiri ” kelas menjajarkan elemen ke tepi kiri bekas dan memastikan ia berpusat secara menegak.
- “ objek-kiri-bawah ” kelas meletakkan elemen
ke sudut kiri bawah bekasnya.
- “ atas objek ” kelas meletakkan elemen di tepi atas bekasnya dan menetapkannya secara mendatar tengah.
- “ pusat objek ” kelas meletakkan elemen di tengah-tengah bekas dan mengekalkannya secara mendatar dan menegak.
- “ bawah objek ” kelas meletakkan elemen di tepi bawah bekasnya dan memastikan ia berpusat mendatar.
- “ objek-kanan-atas kelas ” meletakkan elemen
ke sudut kanan atas bekas.
- “ objek-betul ” kelas meletakkan elemen di tepi kanan bekasnya dan memastikan ia berpusat menegak.
- “ objek-kanan-bawah ” kelas meletakkan elemen pada sudut kanan bawah bekasnya.
Pengeluaran
Dalam halaman web di atas, boleh diperhatikan bahawa semua kandungan elemen yang diganti telah berjaya diletakkan.
Kesimpulan
Untuk meletakkan elemen yang diganti dalam bekas dalam Tailwind, “ objek-
” utiliti digunakan dengan elemen yang dikehendaki, seperti imej. Pengguna perlu menentukan kedudukan atau sisi tertentu iaitu kiri, kanan atau tengah dalam utiliti 'objek- ' untuk meletakkan elemen yang diganti. Artikel ini telah menggambarkan kaedah untuk meletakkan elemen yang diganti dalam bekas dalam Tailwind CSS.