Destul de des, designerul de layout se confruntă cu anumite sarcini non-standard. Scopul nostru este să oferim cea mai rațională și corectă soluție. Astăzi ne vom concentra asupra caracteristicilor fluxului de text în jurul unei imagini.
Formularea problemei
Scrierea unui articol pentru resursa de informații sau blogul dvs. va fi adesea însoțită de imagini intercalate pe parcurs. Deoarece robotul de căutare a respectat întotdeauna prezența imaginilor pe site, iar utilizatorul va fi mai mulțumit de textul cu imagini luminoase. De aici și necesitatea instalării unei metode speciale de formatare care să ofere o interacțiune frumoasă între text și imagini.
Luați în considerare cazul în care împachetarea textului nu este necesară. Mai mult, vă propun o opțiune universală - în absența unei imagini, textul este întins pe toată lățimea blocului (nu toate articolele dvs. vor fi însoțite de ilustrații). Lățimea blocului de text nu este strict fixă. Mai jos este cum ar trebui să arate blocul nostru.
Decizia corectă
Pentru a îndeplini sarcina, creăm două blocuri: unul pentru imagine, al doilea pentru text. Ținând cont de faptul că alte elemente pot fi amplasate sub imagine, creăm un container separat pentru imagine, altfel nu este necesar, puteți pur și simplu să atribuiți clasa necesară etichetei cu imaginea.
HTML
< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Bloc de text
Display: inline; )
Aceasta este soluția standard pentru text care se va înfășura în jurul unui bloc de imagine. Va arata asa:
Ar fi destul de logic să propunem atribuirea proprietăților unui obiect plutitor textului. Dacă lățimile obiectului nu sunt setate, obținem următoarea imagine
Pentru a evita acest efect, trebuie doar să specificați lățimile blocului de text, dar acest lucru nu îndeplinește condițiile sarcinii noastre.
Următoarea opțiune bună ar fi să sugerați utilizarea proprietății margin-left. Deoarece pentru un blog, cel mai probabil, toate pozele din acest bloc vor fi unificate ca dimensiune, soluția, în principiu, nu este rea și eficientă. Cu toate acestea, acesta este doar un caz special, deoarece în absența unei imagini în articol, va exista doar o bandă goală în stânga. Acest lucru nu ne convine. Căutăm o soluție universală!
Și cea mai corectă decizie, așa cum se întâmplă adesea, este cea mai simplă. Pentru a obține formatarea dorită a blocului de text, trebuie să vă referiți la proprietatea overflow cu valoarea ascuns... Să nu uităm de unicul Internet Explorer. Se arată ca de obicei și necesită o atenție suplimentară! Pentru ca bătrânul nostru să funcționeze normal, adăugați proprietatea float în blocul de text (după accesarea proprietății overflow, nu este necesară definirea unei lățimi fixe).
Astfel, am ajuns la soluția corectă, care va duce la efectul indicat în imaginea din subsecțiunea care descrie condițiile problemei noastre.
Imagine (float: stânga; / * wrap * / margine: 10px; / * umplutură pentru frumusețe * / display: inline; / * pentru IE6, astfel încât liniuța din stânga să nu se dubleze * /). text (overflow: ascuns; float: stânga;)
Dezavantajele metodei și alternativei
În ciuda simplității și versatilității metodei, care constă în utilizarea debordare: ascuns, există un dezavantaj. Proprietatea va înceta să-și îndeplinească funcțiile dacă elementele drop-down sunt utilizate în partea de text.
În acest caz, veți avea nevoie de o alternativă pentru a personaliza formatarea dorită. Această tehnică se va baza pe funcționalitatea combinației afisare: tabel-celula;... Această soluție este la fel de eficientă, dar ușor inferioară în simplitate față de prima metodă. Când faceți referire la această metodă, setarea aspectului este necesară și pentru a funcționa în mediul Internet Explorer.
Img (float: stânga; / * setează învelișul * / marja: 10px; / * liniuță pentru frumusețe * / display: inline; / * pentru IE6, astfel încât liniuța din stânga să nu se dubleze * /). text (afișare: tabel-celulă; zoom: 1; /* Cu grija! Șirul este invalid * / }
Și această soluție are propriile sale particularități care trebuie luate în considerare la codificare. Dacă partea de text este suficient de scurtă, atunci următorul bloc va fi afișat în dreapta blocului cu clasa de text. Pentru a evita acest lucru, trebuie să includeți blocul de text și imaginea într-un container separat.
În ce browsere funcționează?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
Toate elementele HTML dintr-o pagină web sunt aranjate într-un flux general, de sus în jos (pentru elementele bloc) și de la stânga la dreapta (pentru elementele inline). Acest mod de afișare nu este foarte eficient, dar datorită CSS-ului este posibil să se schimbe designul în bine.
Elemente plutitoare
Când definiți un element plutitor, trebuie să îl poziționați în cod chiar sub elementul sub care ar trebui să „plutească”, tot restul conținutului situat în codul de sub elementul plutitor va curge în jurul acestuia pe pagina web. Să aruncăm o privire mai atentă asupra modului în care browserele încarcă elementele plutitoare și alt conținut pe o pagină web.
În primul rând, browserul încarcă elementele de pe pagină în ordinea obișnuită, deplasându-se de sus în jos, când întâlnește un element plutitor, îl plasează pe partea specificată. Browserul exclude acest element din fluxul general și, ca urmare, „plutește” pe pagină.
Deoarece elementul plutitor a fost exclus din fluxul general, restul elementelor bloc situate în cod după acesta sunt încărcate în pagină ca și cum acest element nu ar fi acolo. Rețineți că elementele bloc sunt poziționate sub elementul plutit, aceasta deoarece elementul plutit nu mai face parte din flux.
Dacă te uiți îndeaproape la figură, poți observa că, spre deosebire de elementele bloc, atunci când plasezi elemente inline sau text simplu în interiorul unui element bloc, se iau în considerare limitele elementului plutitor, astfel încât elementele inline și textul curg în jurul acestuia.
Rețineți că mai multe flotoare pot fi plasate pe același rând dacă lățimea elementului părinte o permite.
Notă: Elementele poziționate absolute și fixe ignoră proprietatea float.
Folosind proprietatea CSS float, imaginea a fost flotată în partea stângă. Textul aflat în codul HTML de sub imagine se va înfășura în jurul imaginii din partea dreaptă și de jos.
Pentru a crea un spațiu alb între imagine și textul care o înfășoară, trebuie să adăugați margini imaginii. Deoarece imaginea este deplasată la marginea din stânga a elementului părinte, va fi suficient să adăugați margini doar în dreapta și în jos pentru a muta ușor textul departe de acesta:
Img (float: stânga; margine: 0 10px 10px 0;) Încercați "
Anulați ambalarea
Uneori doriți să redați un element în așa fel încât să nu fie afectat de elementele plutitoare din fața lui. De exemplu, un astfel de element poate fi un subsol, care în orice caz ar trebui să fie afișat sub toate celelalte elemente ale paginii. Dacă pagina dvs. are o bară laterală înaltă pe marginea din stânga a paginii dvs. web, atunci subsolul se poate muta în sus și să apară în partea dreaptă a acesteia. În acest fel, în loc ca paginile să fie așezate, conținutul subsolului va apărea la același nivel cu bara laterală. Această problemă este rezolvată prin utilizarea proprietății clear, care spune browserului că elementul stilat nu trebuie să se înfășoare în jurul celui plutitor.
Pentru proprietatea CSS clear, puteți seta una dintre următoarele valori:
- stânga - elementele plutitoare nu sunt permise pe partea stângă.
- dreapta - elementele plutitoare sunt interzise pe partea dreaptă.
- ambele - elementele plutitoare sunt interzise pe ambele părți.
- niciunul - Permite elemente plutitoare pe ambele părți.
Proprietatea clear a fost setată să nu permită elementele plutitoare din partea dreaptă. Textul de sub imagine nu se va înfăşura în jurul imaginii din stânga.
În acest articol, vom analiza opțiunile pentru a face textul în jurul imaginii. Există mai multe moduri în total. Să luăm în considerare fiecare dintre ele. În primul rând, vă sfătuiesc să citiți eticheta html a articolului pentru a avea cunoștințe de bază despre imagini pe paginile html.
1. Împachetare cu stiluri de etichetă ![]()
Imaginea poate fi aliniată numai prin operarea cu stilurile de etichetă CSS ... După cum știți, sintaxa etichetei vă permite să setați alinierea imaginii în atributele:
unde VALUE poate lua valori
- aliniament stânga - stânga
- alinierea dreapta - dreapta
- jos - alinierea la prima linie de text (această valoare este implicită)
- sus - se aliniază la linia superioară a textului
- mijloc - alinierea la linia de bază a textului
de exemplu
Text text text text text text
text text text text text text
Imaginea pare să fie lipită de text, așa că haideți să facem câteva indentări. În plus, există două opțiuni pentru cum se poate face acest lucru.
Opțiunea 1.1. Prin proprietatea CSS - hspace și vspace
Pentru a face acest lucru, în atributele etichetei adauga doua valori:
Așa va arăta pe pagină:
Atributul hspace stabilește indentarea orizontală în pixeli, vspace - verticala în consecință
Opțiunea 1.2. Prin proprietatea CSS - umplutură și marjă
Pentru a face acest lucru, în atributele etichetei adauga doua valori:
Așa va arăta pe pagină:
Arata mai bine datorita faptului ca nu am indentat in stanga. Puteți folosi umplutură în loc de margine, efectul va fi același.
Folosind proprietatea float în loc de aliniere
Pe lângă proprietatea align în atributele etichetei stilurile au o proprietate CSS float care este, de asemenea, responsabilă pentru aliniere. Sintaxa este următoarea:
plutire: dreapta; // Alinierea la dreapta plutește la stânga; // Alinierea la stânga
De exemplu, dacă scrieți în exemplul anterior rezultatul imaginii după cum urmează:
Apoi se traduce în cele ce urmează.
Sarcină
Adăugați o imagine în pagină, astfel încât să fie înfășurată de textul alăturat.
Soluţie
Înfășurarea textului în jurul unei imagini este de obicei folosită pentru a compacta materialul și pentru a lega ilustrații și text împreună. Wrap-ul în sine este creat folosind proprietatea stil float adăugată la selectorul IMG. Valoarea din stânga aliniază imaginea la stânga, la dreapta - la dreapta. În acest caz, curgerea are loc de-a lungul celorlalte părți libere.
Exemplul 1. Înfășurați imaginile
HTML5 CSS 2.1 IE Cr Op Sa Fx
Raportul locotenentului Bokatuev
Ieri, în timpul unei operațiuni de recunoaștere, grupul nostru a fost atacat de un inamic necunoscut în uniforma de camuflaj a lui Alienov. Ca urmare a apărării eficiente și a unui contraatac rapid, un grup mare de militanți a fost zdrobit și respins. Nu există victime în rândul personalului. Soldații grupului de recunoaștere au demonstrat abilități remarcabile în folosirea armelor. Plutonul M.A.Kudryashev s-a remarcat în luptă, folosind cu competență resursele umane ale plutonului său. În urma operațiunii au fost capturate elemente de cultură extraterestră, care au fost transferate în grupul analitic.
Comunicat de presă al grupului de analiști
Armele psihotrope au fost dezvoltate în laboratoarele noastre secrete ca parte a Proiectului Pandora. Ca urmare a unui experiment nereușit, cei mai mulți dintre oamenii de știință care lucrau la dispozitiv au fost expuși la radiații psihotrope, iar aceștia, fiind într-o stare de pasiune, au luat prototipul în detaliu. Poate că oamenii noștri de știință sunt încă într-o stare de pasiune.
Rezultatul acestui exemplu este prezentat în Fig. unu.
Orez. 1. Text cu ilustrații
Utilizarea proprietății float face ca textul să se potrivească perfect cu imaginea. Prin urmare, exemplul a introdus o marjă de proprietate universală, care adaugă marje între imagine și text. Această proprietate setează simultan marginile de sus, dreapta, jos și stânga ale fotografiilor.
Ultima actualizare: 21.04.2016
De obicei, toate blocurile și elementele dintr-o pagină web apar în browser în ordinea în care sunt definite în codul html. Cu toate acestea, CSS oferă o proprietate specială float care ne permite să setăm fluxul în jurul elementelor, astfel încât să putem crea pagini web mai interesante și mai variate în designul nostru.
Această proprietate poate lua una dintre următoarele valori:
stânga: elementul plutește spre stânga și orice conținut care merge sub el curge în jurul marginii din dreapta a elementului
dreapta: elementul se deplasează spre dreapta
niciunul: anulează împachetarea și readuce obiectul în poziția normală
Când aplicați proprietatea float altor elemente cu stil decât elementul img, se recomandă să setați proprietatea width.
Deci, să ne imaginăm că trebuie să afișăm o imagine în stânga textului principal de pe pagină, ar trebui să existe o bară laterală în dreapta, iar restul spațiului ar trebui să fie ocupat de textul principal al articolului. Să definim mai întâi interfața paginii fără proprietatea float:
Stejarul bătrân, totul transformat, s-a întins într-un cort de verdeață delicioasă, întunecată, s-a topit, legănându-se ușor în razele soarelui de seară...
„Nu, viața nu s-a terminat la vârsta de 31 de ani”, a decis brusc, în cele din urmă, în mod invariabil...
În acest caz, vom obține plasarea secvențială a elementelor pe pagină:
Acum, pe aceeași pagină, vom aplica proprietatea float, schimbând stilurile după cum urmează:
Imagine (float: stânga; / * float la stânga * / margin: 10px; margin-top: 0px;) .sidebar (chenar: 2px solid #ccc; fundal-culoare: #eee; lățime: 150px; padding: 10px; margine-stânga: 10px; dimensiunea fontului: 20px; float: dreapta; / * înfășurare la dreapta * /)
Amplasarea elementelor pe pagină se va modifica în consecință:
Elementele cărora li se aplică proprietatea float se mai numesc elemente flotante sau elemente flotante.
Ambalarea interzisă. Ștergeți proprietatea
Uneori devine necesar să dezactivați împachetarea. O sarcină similară poate fi relevantă dacă un bloc ar trebui să fie înfășurat la o nouă linie și nu să curgă în jurul unui element plutitor. De exemplu, un subsol, de regulă, ar trebui să fie strict în partea de jos și să se întindă pe toată lățimea paginii. Dacă există un element plutitor în fața subsolului, atunci subsolul se poate înfășura în jurul acelui element, ceea ce nu este de dorit.
Pentru a preveni împachetarea în CSS, proprietatea clear este utilizată pentru a instrui browserul să nu aibă aplicată împachetare elementului stilizat.
Proprietatea clear poate lua următoarele valori:
stânga: elementul stilizat se poate înfășura în jurul elementului plutit la dreapta. În stânga, wrap-ul nu funcționează.
dreapta: elementul stilizat se poate înfășura numai în jurul elementului plutit din stânga. Și împachetarea din dreapta nu funcționează.
ambele: elementul stilizat se poate înfășura în jurul elementelor plutitoare și se poate deplasa în jos în raport cu acestea
niciunul: elementul stilizat se comportă într-un mod standard, adică ia parte la fluxul spre dreapta și stânga
De exemplu, să presupunem că un subsol este definit pe o pagină web:
Prezența wrap-ului va crea o afișare incorectă, în care subsolul este deplasat în sus:
Să schimbăm stilul subsolului:
Subsol (chenar-sus: 1px solid #ccc; clar: ambele;)
Acum subsolul nu se va înfășura în jurul imaginii, ci va coborî.
