Cara Ngambang Gambar menyang Kiri Teks ing kaca Web

Nggunakake CSS kanggo nderek gambar menyang sisih kiwa saka Tata kaca web

Deleng ing meh kabeh kaca web saiki lan sampeyan bakal bisa ndeleng kombinasi teks lan gambar sing nggawe akeh saka kaca kasebut. Iku gampang banget kanggo nambah teks lan gambar menyang kaca . Tèks dikodhèt nganggo tag HTML standar kayata paragraf, dhaptar, lan judul, dene gambar kalebu nganggo elemen .

Kemampuan kanggo nggawe teks kasebut lan gambar sing bisa dianggo bebarengan yaiku apa sing nggawe perancang web gedhe! Sampeyan ora mung pengin teks lan gambar katon siji sawise liyane, kang minangka carane unsur-unsur tingkat block bakal tata letak minangka standar. Ora, sampeyan pengin ngontrol carane teks lan gambar bisa nggabung ing apa sing bakal dadi rancangan visual situs web sampeyan.

Duwe gambar sing disajeni menyang sisih kiwa kaca nalika teks kaca sing mili iku minangka perawatan desain umum kanggo desain cetak lan uga kanggo kaca web. Ing istilah web, efek iki dikenal minangka ngambang gambar . Gaya iki digayuh kanthi sifat CSS kanggo "ngambang". Properti iki ngidini teks mili ngubengi gambar sisih kiwa menyang sisih tengen. (Utawa ngubengi gambar kanthi sisih tengen menyang sisih kiwa.) Ayo ndeleng carane kanggo entuk efek visual iki.

Mulai Kanthi HTML

Ing bab pisanan sampeyan kudu nggawe duwe sawetara HTML kanggo bisa dianggo. Contone, kita bakal nulis paragraf teks lan nambah gambar ing awal paragraf (sadurunge teks, nanging sawise tag

pambuka). Punika apa sing markup HTML katon kaya:

Teks paragraf kasebut ing kene. Ing conto iki, kita duwe gambar potret headshot, supaya teks iki mbokmenawa bakal dadi bab wong sing dipimpin dening headshot.

Secara default, kaca web bakal ditampilake kanthi gambar ing ndhuwur teks kasebut. Iki amarga gambar minangka unsur tingkat blok ing HTML. Iki tegese browser nampilake line break sadurunge lan sawise unsur gambar minangka standar. Kita bakal ngganti tampilan gawan iki kanthi ngowahi kanggo CSS. Kawitan, Nanging, kita bakal nambah nilai kelas kanggo unsur gambar kita . Kelas kasebut bakal minangka "pancing" sing bakal digunakake ing CSS kita engkas.

Teks paragraf dadi kene. Ing conto iki, kita duwe gambar potret headshot, supaya teks iki mbokmenawa bakal dadi bab wong sing dipimpin dening headshot.

Elinga yen kelas "kiwa" ora ana apa-apa ing dhewe! Kanggo nggoleki gaya sing dikarepake, kita kudu nggunakake CSS sabanjure.

Gaya CSS

Kanthi HTML kita ing papan, kalebu kelas kita "atribut" kiwa, saiki kita bisa dadi CSS. Kita bakal nambah aturan kanggo stylesheet kita sing bakal ngambang gambar kasebut lan uga nambah padding cilik ing jejere supaya teks sing pungkasanipun mbungkus ing gambar ora bokong munggah marang banget rapet. Punika CSS sampeyan bisa nulis:

.left {float: left; padding: 0 20px 20px 0; }

Gaya iki ngapalke gambar sing ana ing sisih kiwa lan nambah padding cilik (nggunakake sawetara cendhela CSS) ing sisih tengen lan ngisor gambar.

Yen sampeyan nggoleki kaca sing ngandhut HTML iki ing browser, gambar saiki bakal diselehake ing sisih kiwa lan teks paragraf bakal katon ing sisih tengen karo jarak jarak sing cocok antarane loro kasebut. Elinga nilai kelas "kiwa" sing dipigunakaké kanthi sewenang-wenang. Kita bisa ngarani apa-apa amarga tembung "kiwa" ora ngandhut apa-apa. Iki kudu duwe atribut kelas ing HTML sing dianggo karo gaya CSS sing nyata sing ndhikte owah-owahan visual sing arep ditindakake.

Cara Alternatif Kanggo Ngasilake Gaya Iki

Pendekatan iki menehi unsur gambar minangka atribut kelas lan banjur nggunakake gaya CSS umum sing ngambang unsur mung siji cara sampeyan bisa ngrampungake "gambar ngalangi kiwa" iki. Sampeyan bisa uga njupuk nilai kelas saka gambar lan gaya karo CSS kanthi nulis pemilih sing luwih spesifik. Contone, nggoleki conto ing ngendi gambar kasebut ana ing bagean divisi kanthi nilai kelas "isi utama".