Kumaha Ka ngambang hiji Gambar ka Kénca tina téks dina Kalurahan a

Ngagunakeun CSS jeung align hiji gambar ka sisi kénca hiji Layout Kalurahan

Tingali dina ampir sagala kaca web kiwari sarta anjeun bakal nempo kombinasi teks jeung gambar nyieun nepi ka bulk jalma kaca. Hal ieu kacida gampang pikeun nambahkeun téks na gambar ka hiji kaca . Téks nu geus disandi ngagunakeun standar tag HTML kawas ayat, béréndélan, sarta lulugu, bari gambar anu kaasup ngagunakeun unsur .

Kamampuh nyieun éta téks na pamadegan Gambar gawé bareng ogé mangrupa naon susunan web désainer hébat eta! Anjeun teu ngan hayang téks anjeun sarta gambar mun muncul hiji sanggeus sejen, nu kumaha ieu elemen block-tingkat bakal perenah sacara standar. Taya, rék sababaraha kontrol ngaliwatan sabaraha teks jeung gambar ngalir babarengan dina naon pamustunganana bakal disain visual ramatloka anjeun.

Ngabogaan hiji gambar nu geus Blok ka sisi kénca kaca sedengkeun téks kaca nu ngalir sabudeureun eta nyaeta perlakuan design umum pikeun desain dicitak oge keur kaca wéb. Dina istilah web, pangaruh ieu dipikawanoh salaku floating gambar . Gaya Ieu kahontal ku harta CSS pikeun "ngambang". sipat Hal ieu ngamungkinkeun téks pikeun ngalir sabudeureun gambar kénca-Blok ka sisi katuhu na. (Atawa sabudeureun hiji gambar katuhu-Blok ka sisi kénca na.) Hayu urang nyandak katingal di kumaha pikeun ngahontal epek visual ieu.

Mimitian Jeung HTML

Hal kahiji anjeun bakal kedah ngalakukeun anu gaduh sababaraha HTML gawekeun. Contona urang, urang nulis ayat tina téks na nambahkeun hiji gambar di awal paragraf (sateuacan teks, tapi sanggeus bubuka

tag). Di dieu nyaeta naon anu aksara HTML Sigana mah:

The téks paragraf mana dieu. Dina conto ieu, urang boga hiji gambar tina poto headshot, jadi téks ieu dipikaresep bakal ngeunaan jalma saha headshot nyaeta kanggo.

Sacara standar, Kalurahan kami bakal nembongkeun jeung gambar di luhur téks. Ieu kusabab gambar anu elemen block-tingkat dina HTML. Ieu ngandung harti yén garis mintonkeun browser ngarecah sateuacan na sanggeus unsur gambar sacara standar. Urang bakal robah standar ieu katingal kucara kana CSS. Mimitina kitu, urang bakal nambahan hiji nilai kelas mun unsur gambar kami . kelas anu bakal meta salaku hiji "hook" anu bakal kami dipaké dina CSS urang engké.

The téks paragraf mana dieu. Dina conto ieu, urang boga hiji gambar tina poto headshot, jadi téks ieu dipikaresep bakal ngeunaan jalma saha headshot nyaeta kanggo.

Catet yén kelas ieu "tinggaleun" teu nanaon pisan di na sorangan! Pikeun urang pikeun ngahontal gaya urang erek, urang kudu ngagunakeun CSS salajengna.

Styles CSS

Kalawan HTML urang di tempat, kaasup atribut kelas urang tina "tinggaleun", urang ayeuna tiasa giliran CSS. Urang bakal nambahan aturan pikeun urang stylesheet nu bakal ngambang gambar éta sarta ogé nambahkeun hiji padding saeutik gigireun eta supados téks nu pamustunganana bakal mungkus sabudeureun gambar teu butt up ngalawan eta teuing raket. Di handap ieu CSS anjeun bisa nulis:

.left {ngambang: ditinggalkeun; padding: 0 20px 20px 0; }

Gaya kieu floats gambar nu ka kenca jeung nambahan saeutik padding (maké sababaraha CSS shorthand) kana katuhu jeung handap gambar.

Lamun reviewed kaca nu ngandung HTML ieu browser a, gambar bakal kiwari jadi Blok ka kénca jeung téks paragraf bakal kaciri bener na kalawan jumlah luyu ngeunaan dipasing antara dua. Catetan dina nilai kelas "tinggaleun" yen urang dipake nyaeta wenang. Urang bisa geus disebut nanaon sabab istilah "tinggaleun" teu nanaon on na sorangan. Ieu perlu mibanda a atribut kelas dina HTML anu hade kalayan mangrupa gaya CSS sabenerna yen dictates perobahan visual Anjeun keur pilari nyieun.

Cara alternatif pikeun ngahontal Styles ieu

pendekatan ieu méré unsur gambar hiji atribut kelas lajeng maké gaya CSS umum yén floats unsur nyaeta ngan hiji cara nu bisa ngalengkepan ieu "gambar kénca Blok" katingal. Anjeun oge bisa nyandak nu nilai kelas kaluar gambar jeung gaya eta kalawan CSS ku nulis pamilihan leuwih husus. Contona, hayu urang nempo conto dimana gambar nu aya di jero ngeunaan hiji division ku nilai kelas "utama-eusi".