Cara Mengambang Gambar ke Kanan Teks

Tutorial lima menit ini menjelaskan caranya

Apakah Anda tertarik untuk mempelajari cara mengapung gambar di sebelah kanan teks? Jika demikian, Anda tidak sendirian. Ada banyak situasi di mana pemrogram menginginkan gambar pada halaman Web untuk muncul di dalam teks dengan teks yang mengalir atau melilitnya. Untungnya, memanipulasi gambar mirip dengan memanipulasi teks, jadi jika Anda memiliki pengalaman dengan yang terakhir, proses ini seharusnya tidak sulit sama sekali.

Bahkan, dengan properti float CSS, mudah untuk mengapung gambar Anda di sebelah kanan teks dan memiliki teks mengalir di sekitarnya di sisi kiri . Gunakan tutorial lima menit ini untuk mempelajari caranya.

Mulai

Untuk memulai, tulis satu paragraf teks dan tambahkan gambar di awal paragraf. Ini harus dilakukan sebelum teks tetapi setelah tag

):

Duis aute irure dolor sed lakukan eiusmod incididunt sementara dalam reprehenderit dalam keadaan voluptate. Cupidatat non proident, ut labore et dolore magna aliqua. Sunt di culpa quis nostrud latihan kecuali occaecat sint. Mollit anim id est laborum.

Selanjutnya, tambahkan atribut gaya ke gambar dan terapkan properti float:

style = "float: right;" />

Teks Anda akan diserang tepat terhadap gambar, jadi tambahkan beberapa margin ke gambar untuk membuatnya lebih mudah dibaca:

margin: 0 5px 0 0; " />

Properti garis tepi margin menerapkan margin di urutan atas, kanan, bawah, dan kiri ( TRBL ).

Membungkus

Dan itu berhasil. Sekarang Anda melihat bahwa melayang gambar ke kanan tidak sulit sama sekali. Anda mungkin juga tertarik untuk mengapungkan gambar ke kiri dan mengapungkannya ke pusat. Meskipun langkah pertama dimungkinkan, sayangnya Anda tidak dapat mengapungkan gambar ke pusat, karena biasanya membutuhkan tata letak dua kolom.