Kif Iffraġġa 'l-Immaġini fuq in-Xellug tat-Test fuq paġna tal-Web

Uża s-CSS biex allinja immaġni fuq in-naħa tax-xellug ta 'tqassim ta' webpage

Ħares lejn kważi kull paġna tal-web illum u tara kombinazzjoni ta 'test u immaġini li jiffurmaw il-biċċa l-kbira ta' dawk il-paġni. Huwa faċli ħafna li żżid it-test u l- istampi fuq paġna . It-test huwa kkodifikat bl-użu ta ' tags HTML standard bħal paragrafi, listi u intestaturi, filwaqt li l-immaġini huma inklużi bl- element .

Il-ħila biex dak it-test u dawk ix-xbihat jaħdmu sew flimkien huwa dak li jiffissaw disinjaturi tal-web kbar 'il bogħod minn xulxin! Inti ma tridx biss it-test u l-immaġini tiegħek biex jidhru waħda wara l-oħra, li hija kif dawn l -elementi tal-livell tal-blokk se jitqassmu awtomatikament. Le, trid xi kontroll fuq kif it-test u l-istampi jispiċċaw flimkien f'liema fl-aħħar mill-aħħar ikun id-disinn viżiv tal-websajt tiegħek.

Li jkollok immaġini li tkun allinjata man-naħa tax-xellug ta 'paġna filwaqt li t - test ta' dik il-paġna jiċċirkola madwaru huwa trattament tad-disinn komuni għad-disinn stampat kif ukoll għal paġni tal-web. F'termini tal-web, dan l-effett huwa magħruf bħala li jżomm l -immaġni f'wiċċ l - ilma . Dan l-istil jinkiseb bil- proprjetà CSS għal "float". Din il-proprjetà tippermetti li t-test jiċċirkola madwar ix-xellug id-dehra allinjata fuq in-naħa tal-lemin. (Jew madwar immaġini allinjata d-dritt fuq in-naħa tax-xellug tagħha). Ejja nħarsu lejn kif nagħmlu dan l-effett viżiv.

Ibda bl-HTML

L-ewwel ħaġa li għandek bżonn tagħmel hu li jkollha xi HTML biex taħdem magħhom. Għall-eżempju tagħna, aħna se niktbu paragrafu ta 'test u żid immaġni fil-bidu tal-paragrafu (qabel it-test, iżda wara l-ftuħ

tikketta). Hawnhekk huwa dak li jixbah dak il-markup HTML:

It-test tal-paragrafu jmur hawn. F'dan l-eżempju, għandna immaġni ta 'ritratt tal-widna, għalhekk dan it-test ikun x'aktarx ikun dwar il-persuna li għaliha huwa l-headhot.

B'mod default, il-paġna web tagħna tidher bl-immaġini fuq it-test. Dan minħabba li l-immaġini huma elementi ta 'blokk f'HTML. Dan ifisser li l-brawżer juri linji ta 'waqfien qabel u wara l-element ta' l-immaġini awtomatikament. Se nbiddlu din il-ħarsa default billi ddawwar lejn CSS. L-ewwel, madankollu, aħna se nżidu valur tal-klassi għall-element ta 'l-immaġni tagħna . Dik il-klassi taġixxi bħala "ganċ" li aħna se nużaw fis-CSS tagħna aktar tard.

It-test tal-paragrafu jmur hawn. F'dan l-eżempju, għandna immaġni ta 'ritratt tal-widna, għalhekk dan it-test ikun x'aktarx ikun dwar il-persuna li għaliha huwa l-headhot.

Innota li din il-klassi ta '"xellug" ma tagħmel xejn waħdu! Għalina nilħqu l-istil mixtieq tagħna, għandna bżonn tuża CSS li jmiss.

Stili CSS

Bil-HTML tagħna fis-seħħ, inkluż l-attribut tal-klassi tagħna ta '"xellug", issa nistgħu ngħaddu għal CSS. Irridu nżidu regola għall- istil tal - istil tagħna li jżommu dik id-dehra u żid ftit ikkuttunar ħdejnha sabiex it-test li fl-aħħar mill-aħħar jaqa 'madwar l-immaġni ma jlaħħaqx miegħu wisq mill-qrib. Hawn hu s-CSS li tista 'tikteb:

.ft (float: left; padding: 0 20px 20px 0; }

Dan l-istil jissoġġorna dik l-immaġni lejn ix-xellug u żżid ftit ikkuttunar (bl-użu ta 'xi shorthand CSS) fuq il-lemin u fuq il-qiegħ tal-immaġini.

Jekk irrevediet il-paġna li fiha dan l-HTML f'brawżer, l-immaġni issa għandha tkun allinjata fuq ix-xellug u t-test tal-paragrafu jidher fid-dritt tiegħu b'ammont xieraq ta 'spazjar bejn it-tnejn. Innota li l-valur tal-klassi ta '"xellug" li użajna huwa arbitrarju. Nistgħu stajtjjaħulha xi ħaġa għax it-terminu "xellug" ma jagħmel xejn waħdu. Dan jeħtieġ li jkollu attribut tal-klassi fl-HTML li jaħdem bi stil CSS attwali li jiddetta l-bidliet viżwali li qed tfittex li tagħmel.

Modi alternattivi biex Tikseb Dawn Stili

Dan l-approċċ li jagħti lill-element ta 'l-immaġini attribut tal-klassi u mbagħad juża stil CSS ġenerali li jisporġi l-element huwa mod wieħed biss kif tista' twettaq din l-immaġni ta '"dehra allinejata xellug". Int tista 'wkoll tieħu l-valur tal-klassi' l barra ta 'l-immaġini u stilha ma' CSS billi tikteb selettur aktar speċifiku. Per eżempju, ejja nħarsu lejn eżempju fejn dik id-dehra tinsab ġewwa diviżjoni b'valur ta 'klassi ta' "kontenut prinċipali".