Kod html untuk membungkus teks di sekitar gambar

Memerlukan kod untuk membungkus teks di sekitar gambar? Biasanya apabila anda membuat halaman HTML, semuanya mengalir secara linear, yang bermaksud satu blok secara langsung. Semua jawatan terdahulu saya adalah contoh ini, i.e. teks, kemudian gambar, kemudian teks, dll.

Kadang -kadang anda mungkin mahu memasukkan teks di sebelah gambar dan bukannya di bawahnya. Ini dipanggil teks pembungkus di sekitar gambar. Sebenarnya agak mudah untuk membungkus teks menggunakan html. Perhatikan bahawa anda tidak perlu menggunakan CSS untuk membungkus teks.

Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Fusce Dictum Gravida Enim, Quis Ultricies Mauris Posuere Quis. Duis Adipiscing Tincidunt Sagittis. Cum sociis natoque penatibus et magnis disparatient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. UT pellentesque nunc in lorem estas non imperdiet enim congue.

Untuk membungkus teks di sebelah kanan imej, anda perlu menyelaraskan gambar ke kiri:

 
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Fusce Dictum Gravida Enim, Quis Ultricies Mauris Posuere Quis. Duis Adipiscing Tincidunt Sagittis. Cum sociis natoque penatibus et magnis disparatient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. UT pellentesque nunc in lorem estas non imperdiet enim congue.
 
 
Walaupun saya memasukkan CSS terus ke dalam tag imej dalam contoh HTML, anda tidak boleh melakukannya lagi. Sebaliknya, anda harus mempunyai fail berasingan yang dipanggil lembaran gaya yang memegang semua kod CSS anda.
 
Dalam tag IMG, anda hanya memberikan kelas kepada tag dan memberikannya. Dalam contoh saya, saya menamakan kelas dibiarkan. Dalam lembaran gaya saya, yang perlu saya lakukan ialah menambah kod berikut:
 
.kiri float: kiri; Padding: 0 10px 0 0;
 
Seperti yang anda lihat, saya menambah 10px padding ke sebelah kanan gambar sejajar kiri. Saya juga menggunakan harta terapung untuk menggerakkan imej keluar dari aliran normal dokumen dan meletakkannya ke sebelah kiri bekas induk.
 
Seperti yang anda lihat, ia jauh lebih bersih daripada menambahkan semua kod itu ke tag IMG itu sendiri. Ia juga lebih mudah untuk dikendalikan dan anda boleh menggunakan lebih banyak sifat CSS untuk menyesuaikan rupa di laman web anda. Sekiranya anda mempunyai sebarang pertanyaan, jangan ragu untuk memberi komen. Nikmati!