Înfășurare de jos css. Eliminarea învelișului textului în jurul unei imagini
Text care se înfășoară în jurul unei imagini. Am învățat deja multe. Cum să creați o diagramă în Word, Cum să creați un cadru frumos în Word, Cum să desenați o diagramă în Word 2003, Cum să schimbați culoarea paginii în Word și multe altele. Și acum aș dori să știu cum să fac text în jurul unei imagini?
Pentru cei care lucrează adesea cu text și grafică în Word, aceasta nu este o problemă. Dar dacă faci asta rar, atunci probabil ai uitat cum poți face textul în jurul unei imagini.
Și așa scrii un articol și introduci o poză în el. Dar ceva nu ți se potrivește. Poza nu pare corect. Ar fi mai bine dacă textul îl încadrează. Mai întâi, aruncați imaginea pe pagină și selectați-o (faceți clic pe ea cu mouse-ul). Apoi deschideți panoul de jos Pictura Selectați Încadra textul . Ce fel de curgere în jurul aluatului să alegeți este deja cum vă place.
- Figura din text.
- Text în jurul cadrului.
- Text de-a lungul conturului imaginii.
- Desen în spatele textului.
- Poza din fața textului.
- Text deasupra și dedesubt.
- Prin împachetarea textului.
- Editați wraparound.
Alege ce iti place.
Cuvânt 2007/2010
Selectați o imagine. Deschide meniul Aranjament în pagină si mergi la bloc eficientiza .
Faceți clic pe săgeata mică de pe buton Încadra textul .
Utilizarea imaginilor într-o pagină html este întotdeauna mai informativă și vizuală, în comparație cu textul solid.
Este posibil să inserați o imagine în text html în mai multe moduri, iar în clasicele acestor metode există 3:
- alinierea la centrul imaginii
- text care se înfășoară în jurul unei imagini
- plasarea unei imagini într-un câmp
Alinierea la centru a imaginii
Pentru a alinia o imagine la centrul unei coloane de text, cea mai simplă etichetă este pune intr-un recipient
Pentru care este setat atributul align="center". Dacă se așteaptă utilizarea frecventă a imaginilor, atunci ar fi mai bine să folosiți stilul CSS pentru etichetă
Cum este implementat, vezi exemplul 1.
Exemplul 1: Alinierea unei imagini la centru
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <cap> <meta http-equiv = „Content-Type” content = „text/html; charset=utf-8” > <titlu > Desen în centru</titlu> <styletype="text/css"> </stil> </cap> <corp > <pclass="cimg"> <img src = "images/sample.gif" lățime = "200" înălțime = "100" alt = "(!LANG:Ilustrație" > !} </p> </corp> </html> |
În acest exemplu, la container
Adăugăm clasa cimg CSS, care specifică alinierea la centrul liniei. Cum va arăta schematic este prezentat în Figura 1.
Orez. 1. Desen în centrul unei coloane de text
Text care se înfășoară în jurul unei imagini
Împachetarea unei imagini cu text este una dintre cele mai comune modalități de aranjare a paginilor HTML, ceea ce vă permite să utilizați eficient tot spațiul liber. tehnici populare de aranjare a paginii web, atunci când imaginea este situată pe marginea ferestrei browserului, iar textul o ocolește pe alte părți (Fig. 2). Pentru a personaliza împachetarea unei imagini cu text, puteți folosi mai multe metode bazate atât pe HTML, cât și pe CSS.
Orez. 2. Imaginea este aliniată în partea stângă a paginii, iar textul se înfășoară spre dreapta
Pentru a încheia o imagine cu text folosind HTML, trebuie să rețineți că eticheta are există un atribut de aliniere care definește alinierea imaginii în document și, în același timp, specifică modul în care textul se înfășoară în jurul imaginii. Pentru a face imaginea aliniată la dreapta și pentru a seta înfășurarea la stânga, trebuie să utilizați align="right", pentru a alinia la stânga și a înfășura textul la dreapta, utilizați align="left". De asemenea, este util să folosiți aici atributele etichetelor
- vspace și hspace, care indică la ce distanță textul se va înfășura în jurul imaginii pe verticală și pe orizontală. Fără a specifica aceste atribute, textul va fi aproape adiacent imaginii (exemplul 2).
Exemplul 2: împachetarea textului în jurul unei imagini folosind HTML
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <cap> <meta http-equiv = „Content-Type” content = „text/html; charset=utf-8” > <titlu > Imagine în text</titlu> </cap> <corp > <p > <img src = „images/sample.gif” lățime = „100” înălțime = „200” alt = „(!LANG:Ilustrație" align = "left" vspace = "5" hspace = "5" > !} </p> </corp> </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.
Pentru a regla împachetarea imaginii folosind stiluri CSS, vom folosi regula float. float:right aliniază imaginea la marginea dreaptă a documentului și împachetează textul la stânga, în timp ce float:left aliniază imaginea la marginea stângă a documentului și înfășoară textul la dreapta imaginii (exemplul 3).
Exemplul 3 Înfășurați text în jurul unei imagini folosind CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <cap> <meta http-equiv = „Content-Type” content = „text/html; charset=utf-8” > <titlu > Imagine în text</titlu> <styletype="text/css"> </stil> </cap> <corp > <p > <img src = „images/sample.gif” lățime = „100” înălțime = „200” alt = „(!LANG:Ilustrație" class = "cimg" > !} 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> </corp> </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.
Aici pentru a eticheta se adaugă clasa cimg, care are alinierea float: right setată la dreapta, iar împachetarea imaginii în stânga și în jos este setată de proprietățile padding-left: 10px și padding-bottom: 10px.
Imagine pe teren
Cu acest format pentru plasarea unei imagini într-un document, imaginea se înfășoară numai pe o parte. Această metodă de plasare seamănă cu o structură cu două coloane, în care o imagine este plasată într-o coloană, iar textul este plasat în a doua.
Cu această schemă, imaginea este situată la dreapta sau la stânga textului, iar împachetarea acesteia are loc doar pe o parte. De fapt, seamănă cu două coloane, una dintre ele conține o imagine, iar cealaltă conține text (Figura 3).
Orez. 3. Plasarea imaginii în caseta din stânga textului
Cunosc două moduri de a crea o structură similară - folosind etichete HTML
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <cap> <meta http-equiv = „Content-Type” content = „text/html; charset=utf-8” > <titlu > Desen pe teren</titlu> <styletype="text/css"> </stil> </cap> <corp > <lățimea tabelului = „100%” spațierea celulelor = „0” adăugarea celulelor = „0” > <tr > <td class="leftcol"> <> </td> <td align="top"> </td> </tr> </table> </corp> </html> |
|
Aricii sunt feriti de agresiunile externe printr-o carapace intepatoare, care ii fereste de cei care vor sa profite de carnea de arici gustoasa si frageda. Dar nu ar trebui să considerați acest animal complet inofensiv, la urma urmei, este un prădător. Da, nu se hrănește cu lupi și vulpi, ci doar pentru că este inferior lor ca mărime. Dar să mușcă un vierme sau chiar un șarpe este în puterea lui. |
Rezultatul este prezentat în Figura 4.
Orez. 4. Imagine pe câmpul din stânga textului
În exemplul 4, lățimea imaginii este de 90 de pixeli, iar lățimea coloanei în care se află este de 110 pixeli. Diferența dintre ele ne oferă indentarea necesară de la text la imagine. Pentru a preveni ca spația dintre celule și atributele din tabel să interfereze cu procesul, este mai bine să le resetați valorile la zero. Vă rugăm să rețineți că celulele sunt setate pe vertical-align: top.
Stiluri CSS: acest exemplu este mai preferat și mai optim. Aici avem nevoie de două straturi
Exemplul 5: Plasarea unei imagini pe un câmp cu straturi și stiluri CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <cod > <html> <cap> <meta http-equiv = „Content-Type” content = „text/html; charset=utf-8” > <titlu > Desen pe teren</titlu> <styletype="text/css"> </stil> </cap> <corp > <div id="pic"> <img src="images/igels.png" width="90" height="78" alt= „Nu o să crezi, dar este un arici”> </div> <div id="text"> Aricii sunt feriti de agresiunile externe printr-o carapace intepatoare, care ii fereste de cei care vor sa profite de carnea de arici gustoasa si frageda. Dar nu ar trebui să considerați acest animal complet inofensiv, la urma urmei, este un prădător. Da, nu se hrănește cu lupi și vulpi, ci doar pentru că este inferior lor ca mărime. Dar să mușcă un vierme sau chiar un șarpe este în puterea lui.</div> </corp> </html> |
Proprietatea float:left pentru stratul #pic este necesară pentru a seta imaginea să se alăture marginii din stânga a documentului, iar linia de sus a textului să se potrivească cu linia de sus a imaginii. Fără această proprietate, stratul #text scade cu înălțimea imaginii. De asemenea, pentru stratul #text, setați marginea stângă a indentației-left:110px la o distanță de 110 pixeli, astfel încât textul să nu se suprapună cu imaginea de acolo. Dacă imaginea trebuie plasată în marginea dreaptă, atunci specificați float:right pentru #pic și margin-right:110px pentru #text.
P.S. Conform specificației HTML4, imaginile trebuie plasate în elemente la nivel de bloc, cum ar fi div sau p.
Cum să împachetați o imagine cu text în HTML și CSS - 4,4 din 5 bazat pe 18 voturi
Astăzi, imaginile sunt folosite aproape peste tot pe Internet. Este imposibil să-ți imaginezi o pagină web fără o imagine. Imaginile atrag atenția, îmbunătățesc aspectul și percepția textului. Prin urmare, în acest tutorial vom învăța cum să poziționăm imaginile în raport cu text și să ne uităm la cum să încapsulăm imaginile în jurul textului în HTML, precum și cum să folosim proprietățile și valorile CSS.
Împachetarea unei imagini cu text folosind HTML
Cel mai simplu mod de a poziționa o imagine pe o pagină este utilizarea instrumentelor HTML. Dar această metodă, în comparație cu posibilitățile CSS, are un dezavantaj, nu are capacitatea de a seta indentarea dintre imagine și text, dar poți doar să înfășoare textul în jurul imaginii.
Să considerăm totul în ordine. Pentru a insera o imagine într-o pagină HTML, utilizați eticheta img, pentru mai multe detalii vedeți lecția despre cum să inserați imagini în HTML: . Prin urmare, pentru a insera o imagine în textul unei pagini HTML, este suficient să scrieți următoarele în cod:
Unde foto.jpg este calea relativă către imagine..jpg
Eticheta img are un atribut align, care determină pe ce margine va fi amplasată imaginea și din ce margine textul se va înfășura în jurul ei (de exemplu, align="left" pe marginea stângă). Atributul align are următoarele valori:
- stânga - imaginea va fi poziționată pe marginea din stânga, iar textul se va înfășura în jurul ei spre dreapta;
- dreapta - imaginea va fi poziționată la dreapta, iar textul se va înfășura în jurul ei la stânga;
- jos - responsabil pentru alinierea verticală, în timp ce imaginea va fi în stânga, iar partea de jos a imaginii față de prima linie de text, această valoare este setată implicit;
- top - la fel ca valoarea anterioară, doar linia de text va fi amplasată la marginea de sus a imaginii;
- mijloc - această valoare aliniază mijlocul imaginii de-a lungul liniei de bază a liniei.
Acum să ne uităm la fiecare element în practică.
1. După cum am menționat deja, imaginea este setată implicit la bootom, adică indiferent dacă o scriem sau nu, imaginea noastră va fi poziționată în raport cu textul astfel:
2. Pentru a alinia imaginea la stânga și textul curge în jurul ei în dreapta, trebuie să scrieți următoarele:
3. Pentru a alinia imaginea la dreapta, trebuie să scrieți în consecință:
4. Acum luați în considerare alinierea verticală. Dacă aplicați valoarea de sus, atunci prima linie de text va fi localizată în partea de sus a imaginii.
5. Alinierea textului la centrul imaginii. Această tehnică este foarte bună de utilizat dacă trebuie să plasați o imagine mică în centrul liniei.
Împachetarea unei imagini cu text folosind proprietăți CSS
De fapt, acele exemple de creare a împachetarii textului și a poziționării imaginii pe care le-am revizuit mai sus sunt puțin depășite, acum este obișnuit să facem toate elementele responsabile de aspectul paginii folosind proprietăți și valori CSS.
Să ne uităm la un exemplu simplu despre cum să înfășurați textul în jurul unei imagini atunci când imaginea este situată pe marginea din stânga, iar textul curge în jurul ei în partea dreaptă. În același timp, vom seta anumite indentări între text și imagine.
La început, trebuie să atribuiți o anumită clasă imaginii noastre, aici puteți utiliza orice cuvânt, principalul lucru este că atunci înțelegeți de ce anume este responsabilă această clasă în designul paginii dvs. Se face astfel:
Acum clasei leftfoto trebuie să primească anumite stiluri CSS.
Leftfoto( float:left; margin: 4px 10px 2px 0px; )
Acest cod este plasat între etichete
..., anexând în etichete sau plasat într-o foaie de stil CSS externă.Să analizăm elementele pe care le-am stabilit aici:
- plutește la stânga; - am poziționat imaginea la stânga și am forțat textul să curgă în jurul imaginii spre dreapta, acesta este în esență același cu atributul align="left".
- marjă: 4px 10px 2px 0px; - setăm marginile, 4px - de sus, 10px - la dreapta, 2px în jos și 0px în stânga imaginii.
De obicei, împachetarea textului în jurul unei imagini se face în publicațiile din ziare, cărți și rezumate, dar foarte rar în lucrările de afaceri. Această aranjare a imaginii îmbunătățește vizual percepția textului, deoarece imaginea se îmbină foarte bine cu ea.
Puteți personaliza această împachetare în multe editoare de text și Microsoft Word. Acum vă voi spune mai detaliat cum să o faceți.
Pentru a începe, trebuie să plasați o imagine pe foaia de lucru în Word. Am discutat despre cum să inserăm o imagine pe o pagină în Microsoft Word în cea anterioară.
Apoi selectați imaginea și în fila " Format„găsește opțiunea” Încadra textul»
Click pe " Încadra textul” și selectați opțiunea de care aveți nevoie din lista derulantă.
Acum, pe exemple, văd în continuare cum vor arăta textul și imaginea atunci când aleg una sau alta opțiune.
In text – împachetare implicită, care este activată în mod implicit la adăugarea unei imagini.
în jurul cadrului - un cadru invizibil este setat automat în jurul imaginii și oriunde vei muta imaginea, textul o va înconjura întotdeauna (cu excepția marginilor foii).
Contur - aproape la fel ca „În jurul cadrului”. Singurul lucru pe care l-am observat este că textul a devenit mai „corect” aliniat în jurul imaginii.
În spatele textului - imaginea este plasată în fundal, iar textul este ajustat deasupra acesteia.
Înainte de text – opusul opțiunii „În spatele textului”, imaginea devine în fața textului și o închide (dimensiunea părții închise depinde de parametrii imaginii).
Sus si jos - textul se înfășoară în jurul imaginii doar de sus și de jos, există spațiu liber pe părțile laterale.
prin - textul se înfășoară în jurul imaginii din toate părțile (această opțiune o numesc și „înfășurare completă”).
Opțiuni suplimentare de marcare- la apăsare, se va deschide o casetă de dialog în care există toate opțiunile de mai sus și are și capacitatea de a redimensiona cadrul imaginii în jurul căruia se înfășoară textul.
Asta e tot, învață, exersează, experimentează.
În acest tutorial, ați învățat cum să împachetați text în jurul unei imagini în Microsoft Word 2007.
Vlad Merjevici
Plutirea vor fi numite astfel de elemente care sunt înfășurate în jurul conturului de alte obiecte ale paginii web, de exemplu, text. Ar fi mai corect să spunem „elemente raționalizate”, dar, pe de altă parte, termenul „element plutitor” a prins rădăcini de mult, așa că îl voi folosi în viitor.
Elementele plutitoare sunt folosite destul de activ în aspectul paginilor web și servesc la implementarea acestor și alte sarcini:
- împachetarea imaginilor cu text;
- crearea de legături;
- meniuri orizontale;
- coloane.
Încadrarea are loc folosind proprietatea stil float cu o valoare stânga sau dreapta. Wrapping nu este setat în mod implicit pentru elemente, dar dacă acest lucru trebuie specificat în mod explicit dintr-un anumit motiv, nu ar trebui să fie folosit niciunul. Pe fig. Figura 3.32 arată rezultatul aplicării unor valori diferite unei imagini lângă text.
Orez. 3.32. Text care se înfășoară în jurul unei imagini
Codul HTML în sine rămâne în mare parte neschimbat și este prezentat în Exemplul 3.21.
Exemplul 3.21. Folosind float
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.Acest exemplu adaugă o proprietate float cu valoarea left la o etichetă . Această valoare aliniază elementul la stânga părintelui sau a altui element plutitor, iar toate celelalte elemente, cum ar fi textul, se înfășoară în jurul acestuia la dreapta. Valoarea corectă, pe de altă parte, aliniază elementul la dreapta părintelui sau a altui element plutitor, iar toate celelalte elemente, cum ar fi textul, se înfășoară în jurul acestuia la stânga.
Deci, cu terminologia stabilită. Să extindem exemplul 3.21 pentru a face desenul să se potrivească mai bine cu textul. Cel mai important lucru este să setați indentarea în dreapta imaginii și, pentru orice eventualitate, de jos. Pentru a face acest lucru, la etichetă se adaugă o clasă numită fig care are setată proprietatea marginii, își definește simultan marginea pe fiecare parte a imaginii (exemplul 3.22).
Exemplul 3.22. Înfășurați imaginea
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Winnie the Pooh nu s-a împotrivit întotdeauna un pic de răcoare, mai ales la ora unsprezece dimineața, pentru că la acea oră micul dejun se terminase de mult, iar cina nici nu se gândea să înceapă. Și, desigur, s-a bucurat teribil să vadă că Iepurele a scos cești și farfurii.
Rezultatul exemplului este prezentat în Fig. 3.33.
Orez. 3.33. Imagine cu aliniere la stânga și înfășurare la dreapta
Creați cadre
Un insert este un bloc cu imagini și text care este încorporat în textul principal. Cadrul este de obicei situat pe marginea stângă sau dreaptă a blocului de text, iar textul principal se înfășoară în jurul lui pe alte părți (Fig. 3.34).
Orez. 3.34. Tip de inserare
Pentru ca cadrul să iasă în evidență în text, acesta este de obicei setat la o culoare de fundal și se adaugă un cadru. Prin aspectul lor, cadrele seamănă cu metoda de mai sus de a împacheta textul în jurul unei imagini, astfel încât codul pentru crearea cadrelor este aproape identic cu cel precedent (Exemplul 3.23).
Exemplul 3.23. Adăugarea unui cadru
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
- Instrument Magic Erase.
În acțiunea sa este similar cu instrumentul Bagheta magică, dar spre deosebire de acesta, nu selectează o zonă, ci o șterge.
Tool Magic Erase (Ștergere magică) șterge pixelii care sunt aproape de culoare. Dacă lucrăm la stratul de fundal sau la un strat cu transparență blocată, pixelii vor fi înlocuiți cu culoarea de fundal. În toate celelalte cazuri, vom obține o zonă transparentă.
Principiul de lucru cu instrumentul Magic Erase este similar cu lucrul cu instrumentul Magic Wand. Și anume, setați mai întâi valoarea de toleranță corespunzătoare, activați caseta de selectare Anti-aliased pentru a crea chenare netede, debifați parametrul Contiguous pentru a elimina tot fundalul în același timp, apoi faceți clic pe fotografia din zona cerului. Dacă stratul de fundal a fost redenumit anterior, vom obține zone transparente în locurile potrivite.
Când creați cadre, asigurați-vă că specificați lățimea acestuia folosind proprietatea width. În caz contrar, dimensiunea stratului va fi mult mai mare decât este necesar.
Dispunerea orizontală a straturilor
În mod implicit, elementele la nivel de bloc sunt aliniate vertical unul sub celălalt, dar folosind proprietatea float, ele pot fi forțate să fie plasate unul lângă altul pe orizontală. Acest lucru necesită setarea lățimii straturilor și setarea acestora pentru a pluti. Dacă lățimea nu este specificată, aceasta va fi egală cu conținutul stratului, inclusiv marginile și marginile. Exemplul 3-24 preia catalogul de produse creat în secțiunea anterioară cu elemente inline-block și îl refactorizează pentru a utiliza float . Pentru a face blocurile vizibile, fundalul paginii web este setat la gri.
Exemplul 3.24. Se blochează pe orizontală
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Calculatoare și echipamente de birou 4296
Dispozitive mobile 2109
Fotografie 315
Video 1856
Rezultatul exemplului este prezentat în Fig. 3.35.
Orez. 3.35. Dispunerea straturilor atunci când utilizați proprietatea float
Din cauza textului diferit din semnătură, înălțimea blocurilor se dovedește a fi și ea diferită, motiv pentru care unele blocuri „se agață” de altele și nu merg pe altă linie. Setarea înălțimii tuturor blocurilor prin proprietatea înălțime, cum ar fi 100px, sau revenirea la utilizarea display: inline-block poate ajuta aici.
Efect de înfășurare
Proprietatea float, pe lângă capacitatea de a crea elemente plutitoare, are o serie de caracteristici de care trebuie să fii conștient. Caracteristica principală este că plutirea afectează toate elementele din apropiere, forțându-le să participe la flux. Să ne uităm la asta în Exemplul 3-25, care arată crearea de săgeți pe aceeași linie folosind valorile stânga și dreapta ale proprietății float.
Exemplul 3.25. Efect de înfășurare
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Deși textul și săgețile folosesc elemente de bloc diferite care ar trebui să fie pe linii diferite, efectul flotant face ca textul să se ridice mai sus pe măsură ce intră în zona de flotare (Figura 3.36). De asemenea, culoarea de fundal a stratului săgeată nu este afișată din cauza faptului că elementele plutitoare nu participă la fluxul documentului, de fapt, aceasta este același lucru cu lăsarea stratului săgeată gol.
Orez. 3.36. Efectul împachetarii asupra textului subiacent
Elementele plutitoare nu afectează înălțimea cutiei în care se află. Pentru a descoperi acest lucru, este suficient să desenați un chenar în jurul blocului și să plasați un element plutitor cu text în interior (exemplul 3.26).
Exemplul 3.26. Înălțimea blocului
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Desenul nu afectează înălțimea stratului și depășește acesta (Fig. 3.37).
Orez. 3.37. Înălțimea stratului plutitor
Toate aceste caracteristici ale elementelor plutitoare pot avea un efect destul de neplăcut asupra aspectului unei pagini web, mai ales în cazuri precum cele enumerate mai sus. Principala modalitate de a obține rezultatul dorit este anularea ambalajului la momentul potrivit. Există mai multe moduri de a face acest lucru.
Anulare Wrap
Wrapping este un instrument puternic de aspect folosit pentru a alinia și aranja elementele. Cu toate acestea, pentru a menține acest instrument sub control, este nevoie de o contrabalansare, fără de care potențialul uriaș al plutirii este redus la câteva sarcini înguste. Vorbim despre anularea ambalajului folosind diferite metode. Enumerăm patru dintre cele mai populare.
Lățimea elementului
Dacă elementul plutitor ocupă toată lățimea disponibilă, atunci elementele rămase după el vor începe pe o nouă linie. Pentru a face acest lucru, activați proprietatea width cu o valoare de 100%. Astfel, stilul din exemplul 3.25 poate fi completat după cum urmează:
Stânga ( float: stânga; lățime: 50%; ) .right ( float: dreapta; lățime: 50%; text-align: right; )
Fiecare strat săgeată ocupă acum 50% lățime și adaugă până la 100% lățime, astfel încât paragraful de după stratul săgeată va începe pe o nouă linie.
Această metodă este rar folosită deoarece lățimea nu poate fi aplicată imaginilor și nu rezolvă problema cu înălțimea stratului și fundalul acestuia.
Folosind overflow
Proprietatea overflow controlează afișarea conținutului unui element bloc dacă nu se potrivește în întregime și depășește zona dimensiunilor specificate. Valoarea automată în special adaugă bare de defilare după cum este necesar, în timp ce ascuns arată doar zona din interiorul elementului, ascunzând restul. În plus, utilizarea overflow cu o valoare auto , scroll sau hidden anulează efectul float . Stilul de exemplu 3.25 este completat cu o singură linie:
Săgeată ( depășire: ascuns; )
Rezultatul după aplicarea proprietății de overflow se schimbă imediat (Fig. 3.38).
Orez. 3.38. Efectul proprietății de overflow asupra fundalului
Exemplul 3.26 este completat în mod similar:
DIV ( depășire: ascuns; )
Rezultatul este prezentat în fig. 3.39.
Orez. 3.39. Efectul proprietății de preaplin asupra graniței
overflow este una dintre cele mai populare proprietăți de plutire. Dar uneori există situații în care utilizarea acestei metode este inacceptabilă. Acest lucru se întâmplă în cazurile în care elementul iese în afara elementului și va fi „decupat”. În exemplul 3.27, imaginea este deplasată la stânga poziției sale inițiale.
Exemplul 3.27. Decuparea unei zone de element
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Winnie the Pooh în vizită la IepureRezultatul exemplului este prezentat în Fig. 3.40.
Orez. 3.40. Decupează poza
În IE6, metoda funcționează numai atunci când proprietatea hasLayout este setată. Pentru a-l activa, puteți adăuga zoom : 1 împreună cu proprietatea overflow.
proprietate clară
Pentru a anula acțiunea unui float, utilizați proprietatea clear cu următoarele valori.
- stânga - anulează float de la marginea stângă a elementului (float: left ). Acest lucru va face ca toate celelalte elemente de pe acea parte să fie împinse în jos și poziționate sub elementul curent.
- dreapta - anulează float-ul din partea dreaptă a elementului (float: right ).
- ambele - anulează înfășurarea elementului de pe marginile din dreapta și din stânga în același timp. Această valoare este recomandată atunci când doriți să derulați un element, dar nu știți exact în ce parte.
Pentru a anula efectul de înfășurare, proprietatea clear trebuie adăugată elementului care vine după float. De obicei, ei introduc o clasă generică, de exemplu, ștergeți și introduceți o etichetă goală
Exemplul 3.28. Folosind clear
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
În acest exemplu, clasa clear are proprietatea clear setată la ambele . Dacă trebuie să utilizați valori diferite, atunci puteți introduce mai multe clase și le aplicați după cum este necesar.
Această metodă este, de asemenea, una dintre cele mai populare în aspect datorită simplității și versatilității sale. Dar, din nou, uneori există combinații în care utilizarea clear eșuează. Acest lucru se întâmplă atunci când mai multe elemente plutitoare diferite apar în același timp în cod. De exemplu, în Exemplul 3-29, flotanții creează două coloane, iar în coloana din dreapta, flotatorul aranjează fotografiile.
Exemplul 3.29. Folosind float
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Meniul
cele mai bune fotografii
Conform comentariilor
Catedrala Sfanta Sofia
biserica poloneza
Linie nouă
Rezultatul exemplului este prezentat în Fig. 3.41. Proprietatea clear afectează nu numai clasa foto, ci și clasa col1, adică. pe toate elementele de deasupra care au setat flotant. Prin urmare, „Linie nouă” nu începe imediat după fotografii, ci după sfârșitul coloanei din stânga.
Orez. 3.41. Eroare de afișare a rândului
În astfel de situații, o combinație de metode diferite ajută. Așadar, fotografiile pot fi adăugate într-un container cu preaplin și clearleft eliminat. Coloana va lua următoarea formă.
Linie nouă
Pseudo element: după
Includerea frecventă a unei etichete goale
Clearleft:after (conținut: "."; /* Afișează textul după element (punct) */ clear: stânga; /* Eliminați ambalajul */ vizibilitate: ascuns; /* Ascunde textul */ afișa: bloc; / * Element bloc * / înălțime: 0; /* Înălțime */ )
Nu contează ce caracter să afișeze, oricum este ascuns utilizatorului prin vizibilitate, dar chiar și atunci când este ascuns, textul ia ceva înălțime și afectează elementele din apropiere. Prin urmare, textul de ieșire mai trebuie să fie transformat într-un element bloc și să i se acorde o înălțime zero.
Deoarece textul generat de pseudo-elementul :after este plasat după element, îl înlocuiește cu ușurință
. Acolo unde este nevoie, trebuie doar să adăugați clasa clearleft, așa cum se arată în Exemplul 3.30.Exemplul 3.30. Pseudo element: după
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Winnie the Pooh în vizită la IepureIE nu acceptă :after până la versiunea 7.0, deci exemplul de mai sus nu va funcționa în acele versiuni. Adăugarea zoom : 1 la un element plutitor anulează flotarea în IE.
Comoditatea metodei de mai sus constă în utilizarea clasei clearleft, care este adăugată la orice etichetă dacă este necesar. De asemenea, este posibil să se introducă clase suplimentare, al căror stil va diferi în alte valori ale clarului .
