Perlukan kod untuk membungkus teks di sekitar imej? Biasanya apabila anda membuat halaman HTML, semuanya mengalir secara linear, bermakna satu blok secara langsung selepas yang lain. Semua catatan terdahulu saya adalah contoh ini, iaitu teks, kemudian gambar, kemudian teks, dll.
Kadang-kadang anda mungkin mahu menyertakan teks di sebelah imej dan bukan di bawahnya. Ini dipanggil pembalut teks di sekitar imej. Ia sebenarnya agak mudah untuk membungkus teks menggunakan HTML. Ambil perhatian bahawa anda tidak perlu menggunakan CSS untuk membungkus teks.
Walau bagaimanapun, pada masa ini W3C mengesyorkan menggunakan CSS dan bukannya HTML untuk jenis tugas tersebut. Saya akan menyebutkan kedua-dua kaedah di bawah ini, tetapi jika anda boleh, lebih baik menggunakan CSS kerana ia lebih mudah disesuaikan dengan reka bentuk laman web responsif.
Bungkus Teks Sekitar Imej menggunakan HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Jika anda tidak dapat mengalahkan, anda akan mendapat lebih banyak peluang. Duis adipiscing tincidunt sagittis. Anda akan mendapat pertaruhan dan magnis di mana-mana pihak, yang tidak dapat dielakkan. Anda boleh menggunakan kata kunci yang dikehendaki. Anda tidak boleh melupakannya. Anda boleh menggunakan kata laluan anda untuk mengamalkan kata laluan anda.
Untuk mempunyai bungkus teks di sepanjang sisi kanan imej, anda perlu menyelaraskan gambar ke kiri:
Teks anda pergi ke sini.
Jika anda mahu teks muncul di sebelah kiri dan imej muncul di sebelah kanan, hanya ubah parameter penjajaran ke "betul".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Jika anda tidak dapat mengalahkan, anda akan mendapat lebih banyak peluang. Duis adipiscing tincidunt sagittis. Anda akan mendapat pertaruhan dan magnis di mana-mana pihak, yang tidak dapat dielakkan. Anda boleh menggunakan kata kunci yang dikehendaki. Anda tidak boleh melupakannya. Anda boleh menggunakan kata laluan anda untuk mengamalkan kata laluan anda.
Teks anda pergi ke sini.
Itu sahaja! Betul betul? Satu-satunya masa yang anda mahu gunakan CSS ialah jika anda mahu menambah margin pada gambar, supaya ada ruang antara teks dan imej.
Anda boleh menambah margin pada gambar dengan menggunakan kod styling CSS berikut:
Teks anda pergi ke sini.
Kod di atas menggunakan elemen CSS MARGIN untuk menambah 10 piksel ruang putih di sebelah kanan imej. Oleh kerana kita telah menyelaraskan imej yang tersisa, kita mahu menambah ruang kosong di sebelah kanan.
Pada asasnya, empat nombor mewakili KOTA BOTTOM KIRI ATAS. Oleh itu, jika anda mahu menambah ruang putih ke imej sejajar dengan betul, anda akan melakukan ini:
Teks anda pergi ke sini.
Oleh itu, ia agak mudah untuk menggunakan HTML untuk melaksanakan tugas ini, tetapi sekali lagi, ia mungkin tidak berfungsi dengan baik untuk tapak yang responsif.
Bungkus Teks Sekitar Imej menggunakan CSS
Cara yang lebih baik untuk membungkus teks di sekitar imej ialah menggunakan CSS. Ia memberi anda kawalan bijirin yang lebih halus ke atas kedudukan elemen dan berfungsi lebih baik dengan standard pengekodan moden.
Walaupun saya memasukkan CSS terus ke dalam tag imej dalam contoh HTML, anda tidak boleh melakukannya lagi sama ada. Sebaliknya, anda harus mempunyai fail berasingan dipanggil lembaran gaya yang memegang semua kod CSS anda.
Dalam tag IMG, anda hanya memberikan kelas kepada tag dan memberikan nama. Dalam contoh saya, saya menamakan kelas yang tinggal . Dalam lembaran gaya saya, semua yang saya perlu lakukan ialah menambah kod berikut:
.left {float: left; padding: 0 10px 0 0;} Seperti yang dapat anda lihat, saya menambah 10px padding ke sebelah kanan imej kiri sebelah. Saya juga menggunakan harta apungan untuk memindahkan imej keluar dari aliran biasa dokumen dan meletakkannya ke sebelah kiri bekas induk.
Seperti yang anda lihat, ia lebih bersih daripada menambah semua kod itu ke tag IMG itu sendiri. Ia juga lebih mudah untuk diurus dan anda boleh menggunakan lebih banyak sifat CSS untuk menyesuaikan rupa halaman web anda. Jika anda mempunyai sebarang soalan, jangan ragu untuk memberi komen. Nikmati!
