Cifre simplificate. CSS: Elemente de ambalare. Imagine pe teren

Cum să împachetați text în jurul unei imagini în HTML și CSS - 4,4 din 5 bazat pe 16 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 și se îmbunătățesc aspectși percepția textului. Prin urmare în această lecție Vom învăța cum să poziționăm imaginile în raport cu text și să ne uităm la cum să înfășuram textul în jurul unei imagini în HTML, precum și cum să folosim proprietățile și valorile CSS.

Încheierea textului în jurul unei imagini folosind HTML

Cel mai simplu mod de a poziționa o imagine pe o pagină este utilizarea folosind HTML. Dar aceasta metoda, comparat cu Capabilitati CSS există un dezavantaj, nu este posibil să setați o marjă între imagine și text, dar puteți face doar ca textul să curgă în jurul imaginii.

Să privim totul în ordine. Pentru a insera o imagine într-o pagină HTML, utilizați eticheta img pentru mai multe detalii, consultați lecția despre cum să inserați imagini în HTML:. Prin urmare, pentru a insera o imagine în text Pagini HTML, doar scrieți următoarele în cod:

Unde este foto.jpg cale relativă la poza..jpg

U etichetă img Există un atribut de aliniere, care determină pe ce margine va fi amplasată imaginea și pe ce margine va curge textul în jurul ei (de exemplu, align="left" de-a lungul marginii stângi). Atributul align are următoarele semnificații:

stânga - imaginea va fi poziționată pe marginea stângă, iar textul va curge în jurul ei spre dreapta;
dreapta - imaginea va fi situată în dreapta, iar textul va curge în jurul ei în stânga;
jos - responsabil pentru aliniere verticală, în acest caz imaginea va fi în stânga, iar partea inferioară a imaginii va fi vizavi de prima linie de text, această valoare este setată implicit;
sus - la fel ca valoarea anterioară, doar linia de text va fi localizată de-a lungul marginii superioare a imaginii;
mijloc - la valoare dată Mijlocul imaginii este aliniat la linia de bază a liniei.

Acum să ne uităm la fiecare element în practică.

1. După cum am menționat deja, în mod implicit imaginea este setată la boot, adică indiferent dacă o setăm sau nu, imaginea noastră în raport cu textul va fi poziționată astfel:

2. Pentru a alinia imaginea la stânga și textul curge în jurul ei spre dreapta, trebuie să scrieți următoarele:

3. Pentru a alinia imaginea la dreapta, trebuie să scrieți în consecință:

4. Acum să ne uităm la alinierea verticală. Dacă aplicați valoarea de sus, prima linie de text va fi plasată lângă marginea de sus a imaginii.

5. Aliniați textul la centrul imaginii. Această tehnică este foarte bună de utilizat dacă trebuie să plasați o imagine mică în centrul liniei.

Înfășurați text în jurul unei imagini folosind proprietățile CSS

De fapt, acele exemple de creare de împachetare a textului și de poziționare a imaginii despre care am discutat mai sus sunt puțin depășite acum este obișnuit ca toate elementele să fie responsabile de aspectul paginii folosind proprietățile și valorile CSS;

Să ne uităm la un exemplu simplu despre cum să faci text în jurul unei imagini, când imaginea este situată pe marginea din stânga și textul curge în jurul ei în partea dreaptă. În același timp, vom seta anumite indentări între text și imagine.

În primul rând, trebuie să atribuim o anumită clasă imaginii noastre, aici puteți folosi orice cuvânt, principalul lucru este că înțelegeți exact de ce este responsabilă această clasă în designul paginii dvs. Acest lucru se face astfel:

Acum clasei leftfoto trebuie să primească câteva stiluri CSS.

Leftfoto( float:left; margin: 4px 10px 2px 0px; )

Acest cod este plasat între etichete ..., incluse în etichete sau plasat în fișier extern Stiluri CSS.

Să ne uităm la elementele pe care le-am stabilit aici:

plutește la stânga; - am poziționat imaginea la stânga și am făcut ca textul să curgă în jurul imaginii din dreapta, acesta este în esență același cu atributul align="left".
marjă: 4px 10px 2px 0px; - setăm marginile exterioare, 4px din partea de sus, 10px din dreapta, 2px din jos și 0px din stânga imaginii.

În documente Microsoft Word destul de comun diverse imagini. Sunt sigur că din când în când trebuie să diluezi ceea ce scrie inserând imagini după semnificația lor, pentru că astfel informațiile sunt percepute mult mai bine.

Site-ul are diverse articole care vă vor ajuta să vă dați seama cum să lucrați corect cu o imagine inserată în Word. Imaginea adăugată poate fi decupată sau imaginea poate fi rotită în Word la unghiul necesar. Dacă dai peste ceea ce ai nevoie sau doar imagine frumoasăîn document, puteți salva imaginea pe computer.

De asta ne vom ocupa în acest articol. În Word, textul poate curge în jurul unei imagini nu numai din lateral. Poate fi plasat în spatele lui, de-a lungul conturului sau în jurul cadrului. Am instalat MS Word 2010, dar capturile de ecran realizate vor fi potrivite și pentru cei care au instalat 2007, 2013 sau 2016, cu excepția faptului că numele articolelor pot diferi ușor.

Adăugați o imagine în document și faceți dublu clic pe ea pentru a deschide fila „Lucrul cu desene”– „Format”. Apoi, în grupul „Aranjare”, faceți clic pe butonul „Încheierea textului”. În meniul contextual care se deschide, selectați opțiunea corespunzătoare.

Meniul dorit poate fi deschis în alt mod. Clic Click dreapta mouse-ul peste imagine și selectați „Încheierea textului”. După aceasta, posibilele opțiuni se vor deschide din nou.

Să aruncăm o privire mai atentă la toate tipurile de ambalaje disponibile.

– plasarea obiectului scris în jurul cadrului. Apare un cadru dacă faceți clic pe imagine cu mouse-ul - este un dreptunghi cu markeri de-a lungul conturului. Adică, dacă fotografia este de formă neregulată, textul va fi în continuare tipărit într-un dreptunghi.

– acest ambalaj este cel mai bine folosit pentru obiecte liber de la, astfel încât cuvintele să fie plasate de-a lungul conturului și nu de-a lungul cadrului.

„Prin” – fluxul va fi în jurul cadrului. Este mai bine să utilizați atunci când obiectul nu este complet umplut, dar există zone goale de o anumită formă.

– chiar dacă imaginea este de dimensiuni mici, nu va fi nimic scris în dreapta sau în stânga acesteia.

– obiectul va fi plasat în spatele textului tipărit. Vă rugăm să rețineți că, în timp ce imaginea este selectată, există un cadru cu marcatori de-a lungul conturului pe care îl puteți muta și edita. Dar de îndată ce treceți la editarea sau tastarea cuvintelor, nu veți mai putea selecta desenul, decât dacă marginile acestuia se extind dincolo de ceea ce este scris, adică în marginile din dreapta sau din stânga.

Pentru a face o imagine un fundal în Word, este folosit doar acest tip de ambalare. Puteți citi mai multe despre acest lucru în articol, accesând linkul.

„Înainte de text” – imaginea va fi plasată pe textul propriu-zis și o va acoperi.

– acest element poate fi selectat dacă imaginea are o formă neregulată sau dacă doriți ca cuvintele să fie scrise parțial pe ea. În acest caz, în jurul imaginii va apărea un contur roșu cu markere negre. Mutați mânerele pentru a schimba conturul. Puteți adăuga marcatori noi făcând clic pe linia roșie în locul dorit și mutând cursorul mouse-ului în alt loc.

Cel mai adesea trebuie să imprimați ceva chiar lângă imagine, pe partea dreaptă sau stângă. Dintre toate metodele descrise, fluxul este potrivit pentru aceasta. Selectați-l pentru imagine, apoi mutați obiectul în partea dorită a documentului, astfel încât textul să fie situat în partea dreaptă, ca în exemplu, sau în partea stângă.

Dacă distanța de la text la imagine nu este potrivită, atunci o puteți schimba și seta valori care sunt mai potrivite.

Pentru a face acest lucru, faceți clic dreapta pe imagine și selectați din meniul contextual „Încheierea textului” – .

Se va deschide o fereastră separată „Markup”. În capitolul „Distanța față de text” indicați valorile necesare în câmpurile pe ce părți este situat textul din imagine. Apoi faceți clic pe „OK”.

De exemplu, am mărit această distanță.

Experimentați, vedeți cum va arăta textul în dreapta imaginii, de-a lungul conturului acesteia etc. Alegeți aranjamentul imaginii și textului din document care vi se potrivește cel mai bine.

Evaluează acest articol:

Lista se potrivește pe o imagine, un desen sau o imagine atunci când textul se înfășoară în jurul ei. De exemplu astfel: imagine aliniat la stânga (plutește la stânga) - plutește la stânga;, textul listei curge în jurul ei în partea dreaptă, ca în capturile de ecran. Când înfășurați o imagine, (numerotarea, marcarea) listei se strecoară pe imagine și aveți probleme ( necaz, Engleză - „eroare”, „problemă”). Click pe imagini pentru a le vizualiza integral:

O modalitate simplă de a corecta situația sugerează de la sine - măriți marginea imaginii până când buletinele de listă „se desprind”

În cazul unei simple creșteri a marginii (marginei) unei imagini, împreună cu lista, textul normal se „deplasează” și la dreapta

Să lăsăm imaginea în pace și să trecem la listă, dincolo de care se extinde etichetarea acesteia. Rădăcina problemei constă într-o proprietate rar folosită a elementului listă. Această proprietate determină poziția (plasarea) marcatorilor de listă în raport cu textul acesteia. listă-stil-poziție are doua semnificatii: in afara- marcatorul (glonțul) este situat în afara elementului de listă, ca obiect independent separat și interior- markerul este situat în interiorul elementului (markerul este încorporat în element și este înconjurat de textul acestuia).

Sens listă-stil-poziție implicit, pentru toate browserele - in afara. Markerul este situat în afara chenarului elementului de listă, ca obiect independent separat. De aceea el „urcă” în imaginea noastră. Marginea (liniuța) imaginii „se sprijină” direct pe textul listei, iar buletinele „atârnă” în afara acesteia și ajung în câmpul de imagine. Codul CSS propus schimbă radical situația cu lista care se înfășoară în jurul imaginii:

li (
marja: 0;
umplutură-stânga: 1,9 em;
list-style-position: interior;
text-indent: -1em;
preaplin: ascuns;
}

Scrieți codul de salvare pentru elementul de listă (

) poate fi global (ca în exemplu) sau prin atribuirea unei clase individuale, de exemplu.list (cod CSS .list ol>li,.list ul>li(list-style-position: inside;)). În primul caz, codul pentru împachetarea imaginii va fi distribuit global - tuturor listelor de pe pagină, în al doilea - numai listelor din clasa listă (class=”listă”).

Mare diferență:

Când atribuiți proprietăți globale care se aplică tuturor listelor de pe pagină simultan, controalele create pe baza acestor proprietăți și liste sunt modificate. Ca urmare, meniurile și meniurile de navigare ale site-ului dispar.
In caz de clasa individuală, cum ar fi (class=”list”) - va trebui introdus manual în codul html al listelor solicitate.
„Mijlocul de aur” vă ajută - găsiți clasa de bloc de text ale paginii în șablon și atribuiți proprietăți de împachetare a imaginii numai listelor sale. Apoi, în textul paginii de știri (mesaj, comentariu), listele se vor înfășura frumos în jurul pozelor și imaginilor, iar restul site-ului va rămâne neschimbat.

O proprietate specificată pentru un element de listă (

) se reflectă ușor în proprietățile listei în sine (etichete

Înainte de a începe să lucrați cu o listă pe acest subiect, este o idee bună să îi dați un chenar (border:2px solid #000; proprietate). Acest lucru vă va permite să vedeți clar locația buletinelor „înainte” și „după” editare.

Un efect de împachetare interesant în jurul unei imagini poate fi obținut prin simpla folosire a proprietăților CSS pentru o listă. preaplin: ascuns;. În acest caz, împachetarea va fi efectuată normal, dar din listă vor lipsi marcatori (gloanțe). Uneori, acesta este exact efectul pe care doriți să-l obțineți. Exemplu de cod pentru împachetarea unei liste în jurul unei imagini, cu un simplu preaplin: ascuns;

Cod CSS pentru elementele din listă

li (debordare: ascuns;)

Cod CSS pentru întreaga listă
(la nivel global, pentru întreaga pagină):
ul,ol (overflow: ascuns;)

Perversiuni similare cu preaplin: ascuns; inspirat din codul din amonte. De fapt, același efect poate fi obținut prin simplu stil-listă: niciunul; Această proprietate CSS elimină marcatorii de listă fără nicio tăiere. În plus, proprietatea funcționează în orice situație, întrucât preaplin: ascuns; - numai in combinatie cu list-style-position: exterior;- când listele sunt în afara textului listei.

Toate elementele HTML dintr-o pagină web sunt aranjate într-un flux comun, de sus în jos (pentru elementele bloc) și de la stânga la dreapta (pentru elementele inline). Această metodă 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 flotant, trebuie să îl poziționați în cod direct sub elementul sub care doriți să plutească, tot restul conținutului plasat în cod sub elementul flotant va curge în jurul acestuia pe pagina web. Să aruncăm o privire mai atentă asupra modului în care browserele încarcă elemente plutitoare și alt conținut pe o pagină web.

În primul rând, browserul încarcă elemente pe pagină în ordinea normală, 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, elementele bloc rămase situate în cod după acesta sunt încărcate pe pagină ca și cum acest element nu ar fi acolo. Rețineți că elementele bloc sunt plasate sub elementul plutitor, aceasta deoarece elementul plutitor nu mai face parte din fluxul general.

Dacă te uiți cu atenție la figură, vei vedea că, spre deosebire de elementele bloc, atunci când plasezi în linie sau text simplu situat în interior element bloc, se iau în considerare limitele elementului plutitor, deci elemente inline iar textul curge în jurul lui.

Rețineți că puteți plasa mai multe elemente plutitoare pe un rând dacă lățimea permite acest lucru element părinte.

Notă: elemente cu absolut și poziționare fixă ignorat proprietate de plutire.

Numele documentului

Prin utilizarea Proprietăți CSS float Imaginea a fost făcută să plutească pe partea stângă. Textul aflat în codul HTML de sub imagine se va înfășura în jurul imaginii de-a lungul părților din dreapta și de jos.

Pentru a crea spațiu golîntre imagine și textul din jurul acesteia, trebuie să adăugați o umplutură externă imaginii. Deoarece imaginea este decalată la marginea din stânga a elementului părinte, va fi suficient să adăugați umplutură 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 »

Anulează Wrap

Uneori doriți să afișați un element, astfel încât să nu fie afectat de elementele plutitoare din fața lui. Un astfel de element, de exemplu, ar putea fi subsolul, care în orice caz ar trebui să fie afișat sub toate celelalte elemente ale paginii. Dacă pagina dvs. este ridicată bara laterală situat pe marginea stângă a paginii web, subsolul se poate ridica și poate apărea în partea dreaptă a acesteia. Deci, în loc ca paginile să fie așezate, conținutul subsol va apărea la același nivel cu meniul lateral. Această problemă Acest lucru este rezolvat prin utilizarea proprietății clear, care spune browserului că elementul care este stilat nu trebuie să se înfășoare în jurul elementului flotant.

Pentru CSS proprietăți clare puteți seta una dintre valorile:

stânga - elementele plutitoare nu sunt permise pe partea stângă.
dreapta - elementele plutitoare nu sunt permise partea dreapta.
ambele - elementele plutitoare sunt interzise pe ambele părți.
nici unul - permite elemente plutitoare pe ambele părți.

Numele documentului

Proprietatea clear specifică faptul că elementele plutitoare nu sunt permise în partea dreaptă. Textul situat sub imagine nu se va înfăşura în jurul marginii din stânga a imaginii.

Destul de des, designerului de layout i se dau anumite sarcini non-standard. Scopul nostru este să oferim cea mai rațională și corectă soluție. Astăzi vom vorbi despre caracteristicile înfășurării textului în jurul unei imagini.

Formularea problemei

Scrierea unui articol pentru dvs resursă informațională sau un blog va fi adesea însoțit de imagini intercalate de-a lungul cursului prezentării textului. Deoarece robot de căutareÎntotdeauna am respectat prezența imaginilor pe site, iar utilizatorul va fi mai mulțumit de textul cu imagini luminoase. De aici și necesitatea instalării mod special formatare care va asigura o interacțiune frumoasă între text și imagini.

Să luăm în considerare cazul în care împachetarea textului nu este necesară. Mai mult, ofer 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.

Soluție corectă

Pentru a implementa sarcina, creăm două blocuri: unul pentru imagine, al doilea pentru text. Ținând cont de faptul că pot exista și alte elemente 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; )

Acest soluție standard pentru textul care se va înfășura în jurul blocului cu imaginea. Va arata asa:

Ar fi destul de logic să sugerăm atribuirea proprietăților unui obiect plutitor textului. Dacă nu valorile stabilite lățimea obiectului obținem următoarea imagine

Pentru a evita acest efect, trebuie pur și simplu să specificați lățimea blocului de text, dar aceasta nu corespunde condițiilor sarcinii noastre.

Următoarea opțiune bună ar fi să folosiți proprietatea margin-left. Întrucât pentru un blog, cel mai probabil, toate pozele din acest bloc vor fi unificate ca mărime, soluția este, în principiu, deloc rea și eficientă. Cu toate acestea, acest lucru este doar caz special, deoarece dacă nu există nicio poză în articol, va fi pur și simplu o bandă goală în stânga. Asta nu ne convine. Căutăm o soluție universală!

Și cea mai corectă soluție, așa cum se întâmplă adesea, este cea mai simplă. Pentru a obține formatarea dorită a unui bloc de text, trebuie să accesați proprietatea overflow cu valoarea ascuns. Nu uitați de Internet Explorer unic. Ca de obicei, se arată și necesită o atenție suplimentară! Pentru ca bătrânul nostru să funcționeze normal, adăugăm proprietatea float în blocul de text (după accesarea proprietății overflow, nu va fi necesară definirea unei lățimi fixe).

Astfel am ajuns la decizia corectă, ceea ce va duce la efectul indicat în imaginea din subsecțiunea care a descris condițiile sarcinii noastre.

Imagine (float: stânga; /*wrap */ margin: 10px; /*marginea pentru frumusete */ afișaj: inline; /* pentru IE6, astfel încât marginea 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 overflow:ascuns, există un dezavantaj. Proprietatea nu își va mai îndeplini funcțiile dacă sunt utilizate elemente derulante în partea de text.

În acest caz, veți avea nevoie de o alternativă pentru a configura formatarea dorită. Această tehnică se va baza pe funcționalitatea combinației display:tabel-celula;. Această soluție este la fel de eficientă, dar ușor inferioară în simplitate față de prima metodă. Când apelați această metodă, trebuie, de asemenea, să setați aspectul să funcționeze în mediul Internet Explorer

Img ( float: stânga; /* setează ambalajul */ marja: 10px; /* indentare pentru frumusețe */ afișaj: inline; /* pentru IE6, astfel încât marginea 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 caracteristici care trebuie luate în considerare în timpul amenajării. Dacă partea de text este suficient de scurtă, 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+	-	-