Kon Unsaon Pag-Float ang Imahen sa Wala nga Teksto sa Webpage

Paggamit sa CSS aron sa pagparis sa usa ka larawan sa wala nga bahin sa Layout sa webpage

Tan-awa ang halos tanang web page karon ug makita nimo ang kombinasyon sa teksto ug mga hulagway nga naglangkob sa kadaghanan sa mga panid. Sayon kaayo ang pagdugang sa teksto ug mga larawan sa usa ka panid . Ang teksto gi-code gamit ang standard HTML tags sama sa mga parapo, mga lista, ug mga ulohan, samtang ang mga hulagway gilakip gamit ang elemento .

Ang katakos sa paghimo niana nga teksto ug sa mga hulagway nga magkauban sa pagtrabaho mao ang naghimo sa talagsaong mga tigdisenyo sa web! Dili nimo gusto nga ang imong teksto ug mga hulagway magpakita sa usag-usa, nga mao ang paagi nga kini nga mga elemento sa block-level magamit sa default. Dili, gusto nimo nga kontrolon kung giunsa ang teksto ug mga hulagway nga mag-agi sa unsa ang katapusan nga disenyo sa imong website.

Ang pagbaton og usa ka imahen nga nahiangay sa wala nga bahin sa usa ka panid samtang ang teksto sa panid nga nag-agas sa palibot niini usa ka komon nga pagtambal nga disenyo alang sa giimprinta nga disenyo ug alang usab sa mga panid sa web. Sa termino sa web, kini nga epekto nailhan nga naglutaw sa imahe . Kini nga estilo nakab-ot pinaagi sa CSS property alang sa "float". Kini nga kabtangan nagtugot sa teksto sa pag-ambak sa palibot sa wala nga panid nga hulagway ngadto sa tuo nga bahin niini. (O sa palibot sa usa ka husto nga hulagway nga larawan sa wala nga kilid niini.) Atong tan-awon kon unsaon pagkab-ot kining biswal nga epekto.

Pagsugod Uban sa HTML

Ang unang butang nga kinahanglan nimo nga buhaton mao ang adunay pipila ka HTML nga magamit. Alang sa among ehemplo, magsulat kami og parapo sa teksto ug makadugang sa usa ka larawan sa sinugdanan sa parapo (sa wala pa ang teksto, apan human sa pagbukas

tag). Ania kini kung unsa ang marka sa HTML nga ingon niini:

Ang teksto sa parapo moadto dinhi. Sa niini nga panig-ingnan, kita adunay usa ka imahen sa usa ka hulagway sa ulo, mao nga kini nga teksto lagmit mahitungod sa tawo nga gipangayo sa mga headshot.

Sa baylo, ang atong webpage ipakita uban ang hulagway sa ibabaw sa teksto. Kini tungod kay ang mga imahe mga block-level nga mga elemento sa HTML. Kini nagpasabot nga ang browser nagpakita sa linya nga mga break sa dili pa ug human sa image elemento pi- naandan. Atong usbon kini nga hitsura pinaagi sa pagbalik sa CSS. Una, bisan pa niana, among idugang ang usa ka bili sa klase sa among elemento sa hulagway . Kana nga klase molihok ingon nga "kaw-it" nga atong gamiton sa atong CSS sa ulahi.

Ang teksto sa parapo moadto dinhi. Sa niini nga panig-ingnan, kita adunay usa ka imahen sa usa ka hulagway sa ulo, mao nga kini nga teksto lagmit mahitungod sa tawo nga gipangayo sa mga headshot.

Timan-i nga kining klase sa "wala" wala'y bisan unsa sa iyang kaugalingon! Aron makab-ot ang atong gitinguha nga estilo, kinahanglan natong gamiton ang CSS sunod.

Mga Estilo sa CSS

Uban sa atong HTML nga nahimutang, lakip na ang atong hiyas sa klase nga "wala", mahimo na kita karon mahimong CSS. Kita magadugang sa usa ka lagda sa atong stylesheet nga molutaw sa maong larawan ug usab magdugang og usa ka gamay nga padding sunod niini aron nga ang teksto nga sa katapusan magwagtang sa imahe dili maputol batok niini. Ania ang CSS nga imong isulat:

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

Kini nga estilo naglutaw sa maong larawan sa wala ug nagdugang usa ka gamay nga padding (gamit ang pipila ka CSS shorthand) sa tuo ug sa ilalum sa hulagway.

Kon imong girepaso ang panid nga naglangkob niini nga HTML diha sa usa ka browser, ang hulagway karon nga nahiangay sa wala ug ang teksto sa parapo mopakita sa iyang katungod sa usa ka tukma nga gidaghanon sa gilay-on tali sa duha. Matikdi nga ang bili sa klase sa "wala" nga atong gigamit binuutbuut. Mahimo natong gitawag kini bisan unsa tungod kay ang termino nga "wala" wala'y bisan unsa sa iyang kaugalingon. Kini kinahanglan nga adunay usa ka hiyas sa klase diha sa HTML nga naglihok uban sa aktwal nga estilo sa CSS nga nagdiktar sa mga kausaban sa visual nga imong gipangita.

Alternatibong mga Pamaagi aron makab-ot kini nga mga Estilo

Kini nga pamaagi sa paghatag sa elemento sa imahen nga usa ka hiyas sa klase ug dayon gamit ang usa ka kinatibuk-an nga estilo sa CSS nga naglutaw sa elemento usa lamang ka paagi nga mahimo nimo kining "hulagway nga nahan-ay nga hulagway" nga hitsura. Mahimo usab nimo makuha ang bili sa klase sa hulagway ug estilo kini sa CSS pinaagi sa pagsulat sa mas espesipikong selector. Pananglitan, atong tan-awon ang usa ka pananglitan kung asa nga imahen anaa sa sulod sa usa ka dibisyon nga adunay usa ka klase nga bili sa "main-content".