Kode HTML untuk membungkus teks di sekitar gambar

Membutuhkan kode untuk membungkus teks di sekitar gambar? Biasanya saat Anda membuat halaman HTML, semuanya mengalir secara linear, yang berarti satu blok langsung demi satu. Semua posting saya sebelumnya adalah contoh dari ini, saya.e. teks, lalu gambar, lalu teks, dll.

Terkadang Anda mungkin ingin memasukkan teks di sebelah gambar, bukan di bawahnya. Ini disebut teks pembungkus di sekitar gambar. Sebenarnya cukup mudah untuk membungkus teks menggunakan HTML. Perhatikan bahwa Anda tidak perlu menggunakan CSS untuk membungkus teks.

Lorem ipsum dolor duduk amet, elite adipiscing consectetur. Fusce Dictum Gravida Enim, Quis Ultricies Mauris Posuere Quis. Duis adipiscing tincidunt sagittis. Cum Sociis Natoque Penatibus et Magnis Dis Parturient Montes, Nascetur Ridiculus Mus. Aliquam a felis vitae augle lobortis diktum. Curabitur Molestie Posuere Laoreet. UT Pellentesque Nunc di Lorem Egestas Non Imperdiet Enim Congue.

Agar pembungkus teks di sepanjang sisi kanan gambar, Anda harus menyelaraskan gambar ke kiri:

 
Lorem ipsum dolor duduk amet, elite adipiscing consectetur. Fusce Dictum Gravida Enim, Quis Ultricies Mauris Posuere Quis. Duis adipiscing tincidunt sagittis. Cum Sociis Natoque Penatibus et Magnis Dis Parturient Montes, Nascetur Ridiculus Mus. Aliquam a felis vitae augle lobortis diktum. Curabitur Molestie Posuere Laoreet. UT Pellentesque Nunc di Lorem Egestas Non Imperdiet Enim Congue.
 
 
Meskipun saya memasukkan CSS langsung ke dalam tag gambar dalam contoh HTML, Anda benar -benar tidak boleh melakukannya lagi. Sebaliknya, Anda harus memiliki file terpisah yang disebut stylesheet yang menyimpan semua kode CSS Anda.
 
Di tag IMG, Anda cukup menetapkan kelas ke tag dan memberikan nama. Dalam contoh saya, saya menamai kelasnya kiri. Di stylesheet saya, yang harus saya lakukan adalah menambahkan kode berikut:
 
.kiri float: kiri; padding: 0 10px 0 0;
 
Seperti yang Anda lihat, saya menambahkan 10px padding ke sisi kanan gambar yang selaras kiri. Saya juga menggunakan properti float untuk memindahkan gambar dari aliran normal dokumen dan meletakkannya di sisi kiri wadah induk.
 
Seperti yang Anda lihat, ini jauh lebih bersih daripada menambahkan semua kode itu ke tag IMG itu sendiri. Ini juga lebih mudah dikelola dan Anda dapat menggunakan lebih banyak properti CSS untuk menyesuaikan tampilan di halaman web Anda. Jika Anda memiliki pertanyaan, jangan ragu untuk berkomentar. Menikmati!