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.

CSS float ju lejon të krijoni menu HTML, të vendosni blloqe, të rreshtoni imazhet

Nëse nuk e kuptoni shumë mirë se si funksionon mbështjellja në HTML dhe CSS(vetia float), atëherë ky shënim do t'ju ndihmojë të lundroni. Vetia float CSS shpesh përdoret për të pozicionuar dy ose më shumë kuti në një rresht. Pjesa e sipërme e këtyre blloqeve është në të njëjtin nivel, pjesa e poshtme - në varësi të lartësisë së blloqeve. Vetë blloqet "lundrojnë" në të majtë ( noton: majtas) ose djathtas ( noton: drejtë). Ekziston edhe një vlerë e none, fiket mbështjellja (puna e float) për një element specifik me float: asnjë

Vetia përdoret gjithashtu gjatë rreshtimit të imazheve.

Mbështillni tekstin rreth një fotografie

Karakteristikat e Wrapping në CSS

Një efekt "fantazmë" ndodh kur një imazh i rreshtuar në secilën anë është i madh dhe ndodhet në fund të bllokut në të cilin është rreshtuar. Në këtë rast, elementët e mëpasshëm të bllokut gjithashtu mund të ndërveprojnë.

Një veçori tjetër është humbja e lartësisë nga elementi mëmë. Kur lartësia e bllokut prind përcaktohet nga përmbajtja, dhe ka elementë lundrues brenda, atëherë prindi "harron" lartësinë e atyre të brendshme (ata u larguan!). Rezultati është kufiri i shembur i elementit mëmë HTML

Zhmbështjellja në HTML dhe CSS është e qartë

Për të shmangur problemet e përshkruara më sipër, mund të specifikoni një element blloku prapa elementëve lundrues me veçorinë e qartë CSS. Kjo veti anashkalon efektet e lundrimit në elementët që pasojnë lundrimin. Ky mund të jetë një bllok div, ose një element tjetër ose pseudo-element me një vlerë të qartë: majtas (vlerat e tjera janë të qarta: djathtas ose të qarta: të dyja) nëse duam të zhbëjmë efektin e një elementi që lundron në të majtë.

Mbështjellja mund të anulohet duke përdorur veçorinë e qartë CSS

Menuja horizontale

Me ndihmën e mbështjelljes, mund të krijoni një menu horizontale. Për këtë ju duhet të aplikoni noton: majtas ndaj elementeve li... Në këtë rast, elementët marrin një pozicion horizontal, gjithçka që mbetet është të futni lidhje. Kjo nuk është e vetmja mënyrë, një menu e tillë mund të krijohet edhe përmes disa hiperlidhjeve të njëpasnjëshme, duke përdorur vetinë shfaqja: inline-block ose shfaqja: tabela dhe të tjerët.

Për më shumë informacion mbi CSS float, shihni faqen e dokumentacionit CSS-float. E njëjta faqe detajon modelin e boksit CSS.

Zhmbështjellja e blloqeve (float) është operacioni më i zakonshëm në paraqitjen e faqeve HTML. Ne do të mbulojmë të gjitha mënyrat e njohura për të anashkaluar vetinë float CSS.

Përpara se të zhytemi në teknikat e pastrimit të transmetimit, le të hedhim një vështrim te problemi që po përpiqemi të zgjidhim.

Struktura tipike HTML

Blloqe .el-1 dhe .el-2 vendosur krah për krah brenda enës .enë, dhe një element .kryesore vijon pas .enë:

Duam lartësinë e enës .enë ishte e barabartë me gjatësinë e fëmijës më të gjatë të saj (d.m.th. ose .el-1 ose .el-2) dhe kështu që blloku .kryesore të jetë pas bllokut .enë.

Dhe ja çfarë shohim: .enë(korniza e zezë) u shemb sikur nuk kishte asgjë në të, bllok .kryesore(blloku me sfond të kuq) është nën bllok .enë siç deshëm ne, por në të njëjtën kohë ai fshihet pas blloqeve .el-1(me sfond të verdhë) dhe .el-2(me sfond rozë). Zoti e di se çfarë! Nëse shefi im do ta shihte - ai me siguri do të më thoshte, - "Përdorimi, Shurik, paraqitja e tavolinës"... Për fat të mirë, kohët kur ueb faqet ishin shtruar me tabela kanë kaluar prej kohësh dhe ne mund të bëjmë mirë pa to. Nuk me beson? Lexo.

Ndërsa shumë e konsiderojnë këtë si një gabim të shfletuesit, është thjesht mënyra se si funksionojnë elementët lundrues. Prandaj, ne duhet ta detyrojmë prindin të zgjerohet për të akomoduar plotësisht fëmijët. Më pas, artikujt e mëposhtëm do të vendosen nën enë.

Metoda 1: metoda e shkollës së vjetër

Siç e dini, prona CSS qartë vendos se në cilën anë të një elementi është e ndaluar mbështjellja e tij rreth elementeve të tjerë, prandaj kjo veti mund të parandalojë mbivendosjen e elementeve mbi elementët lundrues. Ideja është kjo: futni një element bosh që ka një veti të qartë poshtë blloqeve të lundruara. Është një traditë e gjatë të përdoret një klasë specifike për një element si ky, kështu që mund ta përdorni në HTML-në tuaj. Këtu është CSS klasike:

E qartë (e qartë: të dyja;)

E cila është e zbatueshme për paraqitjen tonë HTML:

Shembulli ynë demo i implementuar me këtë metodë:

Nëse nuk ju intereson një enë që shembet, thjesht një bllok i pozicionuar gabimisht .kryesore, atëherë mund të vendosni edhe një artikull "flush flow" pas kontejnerit. Por, nëse vendosni ta bëni këtë, atëherë do të jetë shumë më e lehtë të shtoni thjesht pronën e qartë në vetë elementin. .kryesore.

Kjo është një metodë e thjeshtë dhe e drejtpërdrejtë. Megjithatë, faqosja moderne priret të ndajë përmbajtjen nga stili, kështu që është më mirë të mos e përdorni.

Metoda 2: vetia e tejmbushjes

Përdorimi i pronës vërshoj në etiketë .enë, mund ta detyrojmë enën të zgjerohet në lartësinë e artikujve të vendosur. CSS-ja jonë do të duket kështu:

Enë (mbushje: e fshehur; / * ose "auto" * /)

HTML-ja jonë do të mbetet e njëjtë siç ishte fillimisht, pa elementë shtesë. Ja me çfarë përfundojmë:

Fatkeqësisht, kjo metodë ka një pengesë: çdo element fëmijë që del jashtë kontejnerit ose do të pritet (në rastin e tejmbushjes: i fshehur;) ose do të shkaktojë shfaqjen e shiritave të lëvizjes (në rastin e tejmbushjes: automatik;).

Metoda 3: klasa "e qartë".

Ne krijojmë një klasë .sqaroj me pseudoelemente :: më parë dhe :: pas dhe jepni shfaqjen: tabelë, e cila krijon një qelizë anonime të tabelës. Kjo klasë do të përdoret për të pastruar elementët e lundruar. Kodi CSS duket si ky:

Clearfix: para, .clearfix: after (përmbajtja: ""; shfaqja: tabela;) .clearfix: after (pastruar: të dyja;) .clearfix (zoom: 1; / * dmth 6/7 * /)

Le të ndryshojmë pak kod HTML duke shtuar në klasë enë Klasa qartësoj:

Këtu është rezultati i klasës sonë të re:

nëse nuk keni nevojë për mbështetje për shfletuesit nën IE8, atëherë kodi ynë do të reduktohet ndjeshëm:

Clearfix: after (përmbajtja: ""; shfaqja: tabela; pastroj: të dyja;)

Metoda 4: përmban-noton për min-lartësi

Enë (lartësia min: përmban-lundron;)

Ky kod jep pothuajse të njëjtin efekt si clearfix, ose overflow, por me një rresht kodi dhe, për më tepër, është i lirë nga disavantazhet për të cilat folëm më parë. Fatkeqësisht, asnjë nga shfletuesit nuk e mbështet ende këtë veçori, kështu që thjesht mbani në mend.

Pra, ju keni një grup të tërë metodash të ndryshme të qartësimit. Aplikimi i klasës .sqarojështë bërë një standard dhe unë rekomandoj shumë përdorimin e tij në vend të dy metodave të mëparshme.

Përdorimi i fotografive në një faqe html është gjithmonë më informues dhe më i qartë, në krahasim me tekstin solid.

Është e mundur të futësh një fotografi në html-tekst në disa mënyra, dhe në klasikët e këtyre mënyrave ka 3:

• shtrirje në qendër të imazhit
• mbështillni tekstin rreth imazhit
• vendosja e imazhit në fushë

Përafrimi i imazhit në qendër

Për të lidhur një imazh në qendër të një kolone teksti, mënyra më e lehtë është të etiketoni vendoseni në një enë

Për të cilin është vendosur atributi align = "center". Nëse prisni përdorim të shpeshtë të imazheve, atëherë do të ishte më mirë të përdorni stilin CSS për etiketën

Shikoni shembullin 1 për mënyrën se si bëhet kjo.

Shembulli 1: Përafrimi i një fotografie në qendër

Në këtë shembull, te kontejneri

Shto klasën cimg CSS, e cila vendos shtrirjen në qendër të rreshtit. Se si do të duket skematikisht është paraqitur në Figurën 1.

Oriz. 1. Foto në qendër të një kolone teksti

Mbështillni tekstin rreth një imazhi

Mbështjellja e tekstit rreth një imazhi është një nga metodat më të zakonshme të paraqitjes së faqes HTML, e cila ju lejon të përdorni me efikasitet të gjithë hapësirën e lirë. teknikat e njohura të paraqitjes së faqeve të internetit, kur imazhi ndodhet në skajin e dritares së shfletuesit dhe teksti shkon rreth tij nga anët e tjera (Fig. 2). Për të personalizuar mbështjelljen e tekstit rreth imazhit, mund të përdorni disa metoda të bazuara në HTML dhe CSS.

Oriz. 2. Fotografia është rreshtuar në të majtë të faqes dhe mbështjellë rreth tekstit në të djathtë

Për të mbështjellë imazhin me tekst duke përdorur HTML, duhet të mbani mend se etiketa ekziston një atribut align, i cili përcakton shtrirjen e imazhit në dokument dhe në të njëjtën kohë specifikon se si teksti mbështillet rreth imazhit. Në mënyrë që të rreshtoni imazhin djathtas dhe të vendosni rrjedhën në të majtë, duhet të përdorni align = "djathtas", për të rreshtuar në të majtë dhe tekstin në të djathtë, përdorni align = "majtas". Është gjithashtu e dobishme të përdoren atributet e etiketave këtu - vspace dhe hspace, të cilat tregojnë se sa larg do të rrjedhë teksti rreth imazhit vertikalisht dhe horizontalisht. Pa specifikuar këto atribute, teksti do të ngjitet ngushtë me imazhin (shembulli 2).

Shembulli 2: Mbështjellja e një imazhi me tekst duke përdorur HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Për të rregulluar rrjedhën e imazhit duke përdorur stilet CSS, ne do të përdorim rregullin float. float: djathtas - rreshton imazhin në të djathtë të dokumentit dhe e bën tekstin të mbështillet në të majtë, dhe float: majtas bën që imazhi të rreshtohet në të majtë të dokumentit dhe të mbështjell tekstin në të djathtë të figurës (shembulli 3).

Shembulli 3. Mbështjellja e një imazhi me tekst duke përdorur CSS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Këtu te etiketa shtohet klasa cimg, e cila ka shtrirjen e djathtë të vendosur për të notuar: djathtas, dhe rrjedha e imazhit majtas dhe poshtë vendoset nga vetitë padding-left: 10px dhe padding-bottom: 10px.

Imazhi në fushë

Me këtë format të vendosjes së imazhit në dokument, rrjedha rreth imazhit ndodh vetëm në njërën anë. Kjo metodë vendosjeje i ngjan një strukture me dy kolona, ​​ku një fotografi vendoset në njërën kolonë dhe teksti në të dytën.

Me këtë skemë, imazhi ndodhet në të djathtë ose në të majtë të tekstit dhe rrjedh vetëm në njërën anë. Në fakt, duket si dy kolona, ​​njëra prej tyre përmban një foto dhe tjetra përmban tekst (Figura 3).

Oriz. 3. Vendosja e figurës në fushën në të majtë të tekstit

Unë di dy mënyra për të krijuar një strukturë si kjo - duke përdorur etiketat HTML

Tabelat: kjo metodë është e përshtatshme në atë që është e lehtë dhe e kuptueshme të organizohet një strukturë kolone duke përdorur qeliza. Kjo metodë është e vjetër dhe përdorimi i saj nuk është veçanërisht i mirëpritur në dizajnin modern të uebit. Besohet se kjo metodë është e tepërt dhe e vështirë për t'u modifikuar. Por të gjithë fillestarët e kalojnë atë. Për një strukturë të tillë, ne kemi nevojë për një tabelë me tre kolona, ​​në kolonën e parë do të jetë vetë imazhi, në të tretën do të ketë tekst, dhe midis tyre do të tregojmë dhëmbëzimin në kolonën e dytë. Mund të bëni me dy kolona dhe të specifikoni dhëmbëzimin përmes stileve CSS ose duke përdorur atributin gjerësi të etiketës (shembulli 4).

Shembulli 4. Vendosja e një imazhi në fushë duke përdorur tabela

Iriqi mbrohen nga agresioni i jashtëm nga një guaskë gjemba, e cila i shpëton ata nga ata që duan të hanë mish të shijshëm dhe të butë iriq. Por nuk duhet ta konsideroni këtë kafshë plotësisht të padëmshme, në fund të fundit, është një grabitqar. Po, ai nuk ushqehet me ujqër dhe dhelpra, por vetëm sepse është inferior ndaj tyre në madhësi. Por ai mund të hajë me një krimb apo edhe një gjarpër.

rezultati është paraqitur në figurën 4.

Oriz. 4. Imazhi në fushën në të majtë të tekstit

Në shembullin 4, imazhi është 90 piksel i gjerë dhe kolona ku ndodhet është 110 piksel e gjerë. Dallimi midis tyre na siguron dhëmbëzimin e nevojshëm nga teksti në figurë. Në mënyrë që atributet e tabelës, hapësira e qelizave dhe mbushja e qelizave të mos ndërhyjnë në proces, është më mirë të vendosni vlerat e tyre në zero. Vini re se qelizat janë vendosur në rreshtim vertikal: lart.

Stilet CSS: Ky shembull është i preferueshëm dhe optimal. Këtu na duhen dy shtresa.

, parametrat e të cilave do t'i specifikojmë nëpërmjet CSS. Njëra shtresë do të përmbajë imazhin dhe tjetra do të përmbajë tekst. Shikoni shembullin 5 për mënyrën se si funksionon kjo:

Shembulli 5. Vendosja e një imazhi në një fushë me shtresa dhe stile CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<kodi> <html> <kokë> <meta http-equiv = "Lloji i përmbajtjes" përmbajtja = "tekst / html; grup i karaktereve = utf-8"> <titull> Vizatim në fushë</ titulli> <lloji i stilit = "tekst / css"> </ stil> </ kokë> <trup> <div id = "pic"> <img src = "imazhe / igels.png" gjerësia = "90" lartësi = "78" alt = "Nuk do ta besoni, por është një iriq"> </ div> <div id = "tekst"> Iriqi mbrohen nga agresioni i jashtëm nga një guaskë gjemba, e cila i shpëton ata nga ata që duan të hanë mish të shijshëm dhe të butë iriq. Por nuk duhet ta konsideroni këtë kafshë plotësisht të padëmshme, në fund të fundit, është një grabitqar. Po, ai nuk ushqehet me ujqër dhe dhelpra, por vetëm sepse është inferior ndaj tyre në madhësi. Por ai mund të hajë me një krimb apo edhe një gjarpër.</ div> </ trupi> </ html>

Iriqi mbrohen nga agresioni i jashtëm nga një guaskë gjemba, e cila i shpëton ata nga ata që duan të hanë mish të shijshëm dhe të butë iriq. Por nuk duhet ta konsideroni këtë kafshë plotësisht të padëmshme, në fund të fundit, është një grabitqar. Po, ai nuk ushqehet me ujqër dhe dhelpra, por vetëm sepse është inferior ndaj tyre në madhësi. Por ai mund të hajë me një krimb apo edhe një gjarpër.

Vetia float: majtas për shtresën #pic nevojitet për të vendosur imazhin ngjitur në skajin e majtë të dokumentit dhe rreshti i sipërm i tekstit përkon me vijën e sipërme të figurës. Pa këtë veti, shtresa #text zbret në lartësinë e figurës. Gjithashtu, për shtresën #text, vendosim margjinën e majtë të margjinës majtas: 110 px me një distancë prej 110 pikselësh, në mënyrë që aty teksti të mos mbivendoset me imazhin. Nëse imazhi duhet të vendoset në margjinën e djathtë, atëherë specifikoni float: djathtas për #pic dhe margin-right: 110px për #text.

P.S.: Sipas specifikimit HTML4, imazhet duhet të vendosen brenda elementeve të bllokut si div ose p.

Duke përdorur veçorinë float, mund ta rreshtoni imazhin majtas (img (float: majtas; margjina: 0 [x] [y] 0;)) ose djathtas (img (float: djathtas; margjina: 0 0 [x] [ y]; )) skaji i një faqeje interneti ose blloku kontejneri.

Për të parandaluar bashkimin e figurës me tekstin, shtoni vlerat përkatëse të vetive të marzhit për të.

Mund të përdorni h2, p (pastaj: majtas;) ose h2, p (pastaj: djathtas;) për të anuluar mbështjelljen rreth bllokut tjetër të tekstit ose titullit.

Mund ta poziciononi gjithashtu imazhin në qendër të faqes img (ekrani: bllok; margjina: 0 automatik;), ose të mbështillni tekstin rreth imazhit në të dyja anët duke e mbështjellë çdo bllok teksti në një paragraf të veçantë.

Shënimi HTML

Lista e qyteteve në Angli

Amersham

Amersham është .... jpg "> Buxton është ...

Chesterfield

Chesterfield është .... jpg ">

Ajo ka .... jpg "> Dartmouth është ...

Stilet CSS

Trupi (margjina: 0; sfondi: # FFF8E8; mbushja: 0 20 px; madhësia e shkronjave: 90%; kundër-rivendosja: h2; / * krijoni një numërues për çdo titull h2 * /) h1 (familja e fontit: "Lora" , serif; ngjyra: # 564C4A; pesha e shkronjave: 300;) h2 (familja e shkronjave: "Lora", serif; ngjyra: # B00D22; pesha e shkronjave: 300; e qartë: të dyja; / * anuloni mbështjelljen në të dyja anët * / mbushje: 1em 0 0,25em; kufiri-fund: 2px solid; kundër-rritje: h2; / * vendos duke rritur numrin e kokave h2 me një * /) h2: përpara (përmbajtja: "" numëruesi (h2) "." ; / * shtoni në fillim të çdo titulli vlerën aktuale të numëruesit dhe një pikë me një hapësirë ​​* /) p (font-familja: arial; ngjyra: # 785F5B; lartësia e rreshtit: 1.3;) / ****** **** fotografi në të majtë ** ******** / .majtas (lundrues: majtas; margjina: 0 1em 1em 0;) / ********** fotografia në të djathtë * ********* / .djathtas (lundrues: djathtas; margjina: 0 0 1em 1em;) / ********** foto midis tekstit ********** / .kolona (lundrues: majtas; gjerësia maksimale: 30 %; margjina: 0;) .img-center (lundrues: majtas; margjina: 0 1.5% 0 1.5%; m gjerësia e sëpatës: 37%; ) / ********** fotografia e përqendruar ********* * / .qendër (ekrani: bllok; diferenca: 0 automatikisht 1,5%;)

Mbështilleni figurën nga të dyja anët

Teknika është që teksti të vendoset në dy blloqe me të njëjtën gjerësi me një hendek të vogël në mes. Duke përdorur: para dhe: përpara pseudoelementeve, çdo blloku i shtohet një mbajtëse vendesh, gjysma e gjerësisë së figurës dhe lartësia e barabartë me lartësinë e figurës. Fotografia është absolutisht e pozicionuar në atë mënyrë që të mbulojë këto blloqe boshe, gjë që rezulton në një efekt mbështjellës në të dy anët.

Shënimi HTML

Banor pellentesk morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Enean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus