Shumë shpesh, projektuesi i paraqitjes përballet me detyra të caktuara jo standarde. Qëllimi ynë është të ofrojmë zgjidhjen më racionale dhe korrekte. Sot do të përqendrohemi në veçoritë e rrjedhës së tekstit rreth një imazhi.
Formulimi i problemit
Shkrimi i një artikulli për burimin tuaj të informacionit ose blogun tuaj shpesh do të shoqërohet me fotografi të ndërthurura gjatë rrugës. Meqenëse roboti i kërkimit ka respektuar gjithmonë praninë e fotografive në faqe, dhe përdoruesi do të jetë më i kënaqur me tekstin me imazhe të ndritshme. Prandaj nevoja për të instaluar një metodë të veçantë formatimi që do të sigurojë një ndërveprim të bukur midis tekstit dhe imazheve.
Merrni parasysh rastin kur mbështjellja e tekstit nuk kërkohet. Për më tepër, unë propozoj një opsion universal - në mungesë të një fotografie, teksti shtrihet në gjerësinë e plotë të bllokut (jo të gjithë artikujt tuaj do të shoqërohen me ilustrime). Gjerësia e bllokut të tekstit nuk është fiksuar rreptësisht. Më poshtë është se si duhet të duket blloku ynë.
Vendimi i duhur
Për të përmbushur detyrën, ne krijojmë dy blloqe: një për figurën, tjetri për tekstin. Duke marrë parasysh faktin se disa elementë të tjerë mund të vendosen nën figurë, ne krijojmë një enë të veçantë për figurën, përndryshe kjo nuk kërkohet, thjesht mund t'i caktoni klasën e kërkuar etiketës me imazhin.
HTML
< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Blloku i tekstit
Ekrani: inline; )
Kjo është zgjidhja standarde për tekstin që do të mbështillet rreth një blloku fotografish. Do të duket kështu:
Do të ishte mjaft logjike të propozohet që tekstit t'i caktohen vetitë e një objekti lundrues. Nëse gjerësia e objektit nuk është vendosur, marrim foton e mëposhtme
Për të shmangur këtë efekt, thjesht duhet të specifikoni gjerësinë e bllokut të tekstit, por kjo nuk i plotëson kushtet e detyrës sonë.
Opsioni tjetër i mirë do të ishte sugjerimi i përdorimit të pronës margin-left. Meqenëse për një blog, ka shumë të ngjarë, të gjitha fotografitë në këtë bllok do të jenë të unifikuara në madhësi, zgjidhja, në parim, nuk është e keqe dhe efektive. Sidoqoftë, ky është vetëm një rast i veçantë, pasi në mungesë të një fotografie në artikull, do të ketë vetëm një shirit bosh në të majtë. Kjo nuk na shkon. Ne po kërkojmë një zgjidhje universale!
Dhe vendimi më i saktë, siç ndodh shpesh, është më i thjeshti. Për të arritur formatimin e dëshiruar të bllokut të tekstit, duhet t'i referoheni veçorisë së tejmbushjes me vlerën i fshehur... Le të mos harrojmë për Internet Explower unik. Ai shfaqet si zakonisht dhe kërkon vëmendje shtesë! Për ta bërë plakun tonë të funksionojë normalisht, shtoni veçorinë float në bllokun e tekstit (pasi të keni akses në vetinë e tejmbushjes, përcaktimi i një gjerësie fikse nuk kërkohet).
Kështu, arritëm në zgjidhjen e saktë, e cila do të çojë në efektin e treguar në foto në nënseksionin që përshkruan kushtet e problemit tonë.
Imazhi (lundrues: majtas; / * mbështjell * / diferencë: 10 px; / * mbushje për bukurinë * / shfaqja: inline; / * për IE6, në mënyrë që dhëmbëzimi i majtë të mos dyfishohet * /). teksti (mbushje: i fshehur; notues: majtas;)
Disavantazhet e metodës dhe alternativës
Pavarësisht nga thjeshtësia dhe shkathtësia e metodës, e cila konsiston në përdorimin vërshoj: i fshehur, ka një pengesë. Vetia do të ndalojë së kryeri funksionet e saj nëse përdoren elementë rënës në pjesën e tekstit.
Në këtë rast, do t'ju duhet një alternativë për të personalizuar formatimin e dëshiruar. Kjo teknikë do të bazohet në funksionalitetin e kombinimit shfaqja: qeliza e tabelës;... Kjo zgjidhje është po aq efektive, por pak inferiore në thjeshtësi ndaj metodës së parë. Kur i referohemi kësaj metode, cilësimi i paraqitjes kërkohet gjithashtu për të punuar në mjedisin Internet Explower.
Img (lundrues: majtas; / * vendos mbështjellësin * / diferenca: 10 px; / * shenje per bukurine * / shfaqja: inline; / * për IE6, në mënyrë që dhëmbëzimi i majtë të mos dyfishohet * /). teksti (ekrani: qeliza e tabelës; zmadhimi: 1; /* Me kujdes! Vargu është i pavlefshëm * / }
Dhe kjo zgjidhje ka veçoritë e veta që duhet të merren parasysh gjatë kodimit. Nëse pjesa e tekstit është mjaft e shkurtër, atëherë blloku tjetër do të shfaqet në të djathtë të bllokut me klasën e tekstit. Për të shmangur këtë, duhet të mbyllni bllokun e tekstit dhe figurën në një enë të veçantë.
Në cilët shfletues funksionon?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
Të gjithë elementët HTML në një faqe interneti janë rregulluar në një rrjedhë të përgjithshme, nga lart poshtë (për elementët e bllokut) dhe nga e majta në të djathtë (për elementët e linjës). Kjo mënyrë e shfaqjes nuk është shumë efektive, por falë CSS është e mundur të ndryshohet dizajni për mirë.
Elemente lundruese
Kur përcaktoni një element lundrues, duhet ta poziciononi atë në kod pikërisht poshtë elementit nën të cilin ai duhet të "lundrojë", e gjithë përmbajtja tjetër e vendosur në kodin poshtë elementit lundrues do të rrjedhë rreth tij në faqen e internetit. Le të hedhim një vështrim më të afërt se si shfletuesit ngarkojnë elementë lundrues dhe përmbajtje të tjera në një faqe interneti.
Së pari, shfletuesi ngarkon elementet në faqe në rendin e zakonshëm, duke lëvizur nga lart poshtë, kur ndeshet me një element lundrues, e vendos atë në anën e specifikuar. Shfletuesi e përjashton këtë element nga rrjedha e përgjithshme, dhe si rezultat, ai "lundron" në faqe.
Meqenëse elementi lundrues u përjashtua nga rrjedha e përgjithshme, pjesa tjetër e elementeve të bllokut të vendosur në kod pasi të ngarkohet në faqe, sikur ky element të mos ishte aty. Vini re se elementët e bllokut janë të pozicionuar poshtë elementit të lundruar, kjo ndodh sepse elementi i lundruar nuk është më pjesë e rrjedhës.
Nëse shikoni nga afër figurën, mund të shihni se, ndryshe nga elementët e bllokut, kur vendosni elementë inline ose tekst të thjeshtë brenda një elementi blloku, merren parasysh kufijtë e elementit lundrues, kështu që elementët inline dhe teksti rrjedhin rreth tij.
Mbani në mend se lundrimet e shumta mund të vendosen në të njëjtin rresht nëse gjerësia e elementit prind e lejon atë.
Shënim: Elementet e pozicionuar absolut dhe fiks e injorojnë vetinë float.
Duke përdorur veçorinë float CSS, fotografia është vendosur në anën e majtë. Teksti i vendosur në kodin HTML poshtë imazhit do të mbështillet rreth imazhit në anën e djathtë dhe të poshtme.
Për të krijuar hapësirë të bardhë midis figurës dhe tekstit që mbështillet rreth saj, duhet të shtoni margjina në figurë. Meqenëse fotografia është zhvendosur në kufirin e majtë të elementit prind, do të mjaftojë të shtoni margjina vetëm në të djathtë dhe në fund për ta larguar pak tekstin nga ai:
Img (lundrues: majtas; margjina: 0 10px 10px 0;) Provojeni "
Anulo mbështjelljen
Ndonjëherë ju dëshironi të jepni një element në mënyrë të tillë që të mos ndikohet nga elementët lundrues përpara tij. Për shembull, një element i tillë mund të jetë një footer, i cili në çdo rast duhet të shfaqet nën të gjithë elementët e tjerë të faqes. Nëse faqja juaj ka një shirit anësor të gjatë në skajin e majtë të një faqe interneti, atëherë fundi i faqes mund të lëvizë lart dhe të shfaqet në të djathtë të saj. Në këtë mënyrë, në vend që faqet të shtrohen, përmbajtja e fundores do të shfaqet në të njëjtën linjë me shiritin anësor. Ky problem zgjidhet duke përdorur veçorinë clear, e cila i tregon shfletuesit se elementi i stiluar nuk duhet të mbështillet rreth atij lundrues.
Për veçorinë e qartë CSS, mund të vendosni një nga vlerat e mëposhtme:
- majtas - elementët lundrues nuk lejohen në anën e majtë.
- djathtas - elementët lundrues janë të ndaluar në anën e djathtë.
- të dy - elementët lundrues janë të ndaluar në të dy anët.
- asnjë - Lejon elementë lundrues në të dy anët.
Vetia e pastër është caktuar të mos lejojë elementë lundrues në anën e djathtë. Teksti poshtë figurës nuk do të mbështillet rreth figurës në të majtë.
Në këtë artikull, ne do të analizojmë opsionet se si të mbështillni tekstin rreth figurës. Ka disa mënyra në total. Le të shqyrtojmë secilën prej tyre. Së pari, ju këshilloj të lexoni etiketën html të artikullit të ketë njohuri bazë për imazhet në faqet html.
1. Mbështjellja me stile etiketash ![]()
Fotografia mund të përafrohet vetëm duke vepruar me stilet e etiketave CSS ... Siç e dini, sintaksa e etiketës ju lejon të vendosni shtrirjen e imazhit në atributet:
ku VALUE mund të marrë vlera
- shtrirje majtas - majtas
- shtrirje djathtas - djathtas
- fund - shtrirje në rreshtin e parë të tekstit (kjo vlerë është e paracaktuar)
- sipër - rreshtohet në rreshtin e sipërm të tekstit
- në mes - shtrirje në vijën bazë të tekstit
për shembull
Teksti i tekstit tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst
Fotografia duket se është ngjitur pas tekstit, ndaj le të bëjmë disa pika. Për më tepër, ekzistojnë dy opsione se si mund të bëhet kjo.
Opsioni 1.1. Përmes pronës CSS - hspace dhe vspace
Për ta bërë këtë, në atributet e etiketës shtoni dy vlera:
Kështu do të duket në faqe:
Atributi hspace vendos dhëmbëzimin horizontal në pixel, vspace - vertikale në përputhje me rrethanat
Opsioni 1.2. Nëpërmjet pronës CSS - mbushje dhe diferencë
Për ta bërë këtë, në atributet e etiketës shtoni dy vlera:
Kështu do të duket në faqe:
Duket më mirë për faktin se nuk kemi hyrë në të majtë. Mund të përdorni mbushje në vend të marzhit, efekti do të jetë i njëjtë.
Përdorimi i vetive float në vend të align
Përveç veçorisë align në atributet e etiketës stilet kanë një pronë CSS float që është gjithashtu përgjegjëse për shtrirjen. Sintaksa është si më poshtë:
noton: djathtas; // Shtrirja e djathtë noton: majtas; // Rreshtimi majtas
Për shembull, nëse shkruani në shembullin e mëparshëm daljen e figurës si më poshtë:
Pastaj përkthehet në vijim.
Detyrë
Shtoni një imazh në faqe në mënyrë që të mbështillet me tekstin ngjitur.
Zgjidhje
Mbështjellja e tekstit rreth një fotografie zakonisht përdoret për të kompaktuar materialin dhe për të lidhur ilustrimet dhe tekstin së bashku. Vetë mbështjellja krijohet duke përdorur veçorinë e stilit float të shtuar në përzgjedhësin IMG. Vlera e majtë përafron imazhin majtas, djathtas - djathtas. Në këtë rast, rrjedha ndodh përgjatë anëve të tjera, të lira.
Shembull 1. Mbështilleni rreth imazheve
HTML5 CSS 2.1 IE Cr Op Sa Fx
Raporti i toger Bokatuev
Dje, gjatë një operacioni zbulimi, grupi ynë u sulmua nga një armik i panjohur me uniformën e kamuflazhit të Alienov. Si rezultat i mbrojtjes efektive dhe një kundërsulmi të shpejtë, një grup i madh militantësh u shtyp dhe u zmbraps. Nuk ka viktima mes personelit. Ushtarët e grupit të zbulimit treguan aftësi të jashtëzakonshme në përdorimin e armëve. Toga M.A.Kudryashev u dallua në betejë, duke përdorur me kompetencë burimet njerëzore të togës së tij. Si rezultat i operacionit, u kapën elementë të kulturës jashtëtokësore, të cilat u transferuan në grupin analitik.
Deklaratë për shtyp e Grupit Analist
Armët psikotrope janë zhvilluar në laboratorët tanë sekretë si pjesë e Projektit Pandora. Si rezultat i një eksperimenti të pasuksesshëm, shumica e shkencëtarëve që punonin në pajisje u ekspozuan ndaj rrezatimit psikotrop, dhe ata, duke qenë në gjendje pasioni, hoqën prototipin në detaje. Ndoshta shkencëtarët tanë janë ende në një gjendje pasioni.
Rezultati i këtij shembulli është paraqitur në Fig. një.
Oriz. 1. Tekst me ilustrime
Përdorimi i vetive float bën që teksti të përshtatet mirë me imazhin. Prandaj, shembulli prezantoi një diferencë të vetive universale, e cila shton margjina midis figurës dhe tekstit. Kjo veçori cakton njëkohësisht kufijtë e sipërm, djathtas, poshtë dhe majtas të fotove.
Përditësimi i fundit: 21.04.2016
Në mënyrë tipike, të gjitha blloqet dhe elementët në një faqe interneti shfaqen në shfletues në rendin në të cilin janë përcaktuar në kodin html. Sidoqoftë, CSS ofron një veçori të veçantë float që na lejon të vendosim rrjedhën rreth elementeve, në mënyrë që të krijojmë faqe interneti më interesante dhe të larmishme në dizajnin tonë.
Kjo pronë mund të marrë një nga vlerat e mëposhtme:
majtas: elementi noton në të majtë dhe çdo përmbajtje që shkon poshtë tij rrjedh rreth skajit të djathtë të elementit
djathtas: elementi lëviz djathtas
asnjë: anulon mbështjelljen dhe e kthen objektin në pozicionin e tij normal
Kur aplikoni veçorinë float në elementë të stilizuar të ndryshëm nga elementi img, rekomandohet që të vendosni veçorinë gjerësi.
Pra, le të imagjinojmë se duhet të shfaqim një imazh në të majtë të tekstit kryesor në faqe, duhet të ketë një shirit anësor në të djathtë, dhe pjesa tjetër e hapësirës duhet të zërë tekstin kryesor të artikullit. Le të përcaktojmë ndërfaqen e faqes së pari pa veçorinë float:
Pema e vjetër e lisit, e gjitha e transformuar, e shtrirë në një tendë me gjelbërim të ëmbël, të errët, të shkrirë, duke u lëkundur pak në rrezet e diellit të mbrëmjes ...
"Jo, jeta nuk ka mbaruar në moshën 31 vjeç," vendosi papritmas Princi Andrew më në fund, pa ndryshim ...
Në këtë rast, ne do të marrim vendosjen vijuese të elementeve në faqe:
Tani, në të njëjtën faqe, ne do të aplikojmë veçorinë float, duke ndryshuar stilet si më poshtë:
Imazhi (lundrues: majtas; / * noton në të majtë * / margjina: 10 px; margjina-lart: 0 px;) .bari anësor (kufiri: 2 px solid #cccc; ngjyra e sfondit: #eee; gjerësia: 150 px; mbushja: 10 px; margjina- majtas: 10 px; madhësia e shkronjave: 20 px; notimi: djathtas; / * mbështilleni në të djathtë * /)
Vendosja e elementeve në faqe do të ndryshojë në përputhje me rrethanat:
Elementet tek të cilët zbatohet vetia float quhen gjithashtu elementë lundrues ose elementë lundrues.
Mbështjellja është e ndaluar. Pastro pronë
Ndonjëherë bëhet e nevojshme të çaktivizoni mbështjelljen. Një detyrë e ngjashme mund të jetë e rëndësishme nëse një bllok duhet të mbështillet në një linjë të re dhe jo të rrjedhë rreth një elementi lundrues. Për shembull, një fund, si rregull, duhet të jetë rreptësisht në fund dhe të shtrihet në të gjithë gjerësinë e faqes. Nëse ka një element lundrues përpara këmbës, atëherë fundi mund të mbështillet rreth atij elementi, gjë që nuk është e dëshirueshme.
Për të parandaluar mbështjelljen në CSS, vetia e pastër përdoret për të udhëzuar shfletuesin që të mos aplikohet mbështjellja në elementin e stiluar.
Vetia e qartë mund të marrë vlerat e mëposhtme:
majtas: Elementi i stiluar mund të mbështillet rreth elementit të lundruar në të djathtë. Në të majtë, mbështjellja nuk funksionon.
djathtas: Elementi i stiluar mund të mbështillet vetëm rreth elementit të lundruar në të majtë. Dhe mbështjellja në të djathtë nuk funksionon.
të dyja: elementi i stiluar mund të mbështillet rreth elementëve lundrues dhe të lëvizë poshtë në lidhje me ta
asnjë: elementi i stiluar sillet në mënyrë standarde, d.m.th. merr pjesë në rrjedhën djathtas dhe majtas
Për shembull, le të themi se një fund i faqes është përcaktuar në një faqe interneti:
Prania e mbështjelljes do të krijojë një ekran të pasaktë, në të cilin fundi zhvendoset lart:
Le të ndryshojmë stilin e futbollit:
Fundi (kufiri në krye: 1px solid #cccc; i qartë: të dyja;)
Tani futeri nuk do të mbështillet rreth imazhit, por do të zbresë.
