Sarcină

Adăugați o imagine în pagină, astfel încât să se înfășoare în jurul textului adiacent.

Soluţie

Împachetarea textului în jurul unei imagini este de obicei folosită pentru a aranja material compact ș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ășurarea imaginilor

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, îmbrăcat în uniformă de camuflaj Alien. Ca urmare a apărării eficiente și a unui contraatac rapid, un grup mare de militanți a fost zdrobit și aruncat înapoi. Nu există victime în rândul personalului. Luptătorii grupului de recunoaștere au demonstrat abilități remarcabile în folosirea armelor. Deosebit de distins în luptă a fost plutonierul M.A. Kudryashev, care a folosit cu înțelepciune resursele umane ale plutonului său. În urma operațiunii, elemente de cultură extraterestră au fost capturate și transferate în grupul analitic.

Comunicat de presă al grupului analitic

Armele psihotrope au fost dezvoltate în laboratoarele noastre secrete ca parte a Proiectului Pandora. Ca urmare a unui experiment nereușit, majoritatea oamenilor de știință care au lucrat la dispozitiv au fost expuși la radiații psihotrope și, într-o stare de pasiune, au demontat prototipul. Poate că oamenii noștri de știință sunt încă într-o stare de pasiune.

Rezultat acest exemplu prezentat în Fig. 1.

Orez. 1. Text cu ilustrații

Utilizarea proprietății float forțează textul să se potrivească bine cu imaginea. Prin urmare, exemplul introduce o marjă de proprietate universală, care adaugă umplutură între imagine și text. Această proprietate setează simultan indentarea în partea de sus, dreapta, jos și stânga a fotografiilor.

ÎN documente Microsoft Cuvânt destul de des există 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ă dați peste dreapta sau doar o imagine frumoasă într-un 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 desenele”– „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 clic 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 imprimat în continuare într-un dreptunghi.

– acest ambalaj este cel mai bine folosit pentru obiecte formă liberă, 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 de pe ea să fie scrise parțial. Î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 modifica ș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”. In sectiunea „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:

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 atent la imagine, vei vedea că, spre deosebire de elementele bloc, atunci când plasezi elemente inline sau text simplu situat în interior element bloc, limitele elementului plutitor sunt respectate, astfel încât elementele inline și textul curg în jurul acestuia.

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

Notă: Elementele poziționate absolute și fixe ignoră proprietatea float.

CU folosind CSS proprietăți float Imaginea a fost făcută să plutească în 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.

Încercați »

Pentru a crea un spațiu gol între o imagine și textul care se înfășoară în jurul ei, trebuie să adăugați umplutură 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 ta are un nivel ridicat meniul 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 să fie poziționat pe pagină, conținutul subsolului va apărea la același nivel cu bara 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.

• Proprietatea CSS clear poate fi setată la una dintre următoarele valori:
• stânga - elementele plutitoare nu sunt permise pe partea stângă. dreapta - elementele plutitoare nu sunt permise.
• partea dreaptă
• ambele - elementele plutitoare sunt interzise pe ambele părți.

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.

Enunțarea problemei

Scrierea unui articol pentru dvs resursă informațională sau un blog va fi adesea însoțit de imagini intercalate pe parcursul prezentării textului. Deoarece robotul de căutare a respectat întotdeauna prezența imaginilor pe site, utilizatorul va fi mai mulțumit de textul cu imagini luminoase. De aici și necesitatea instalării unei metode speciale de formatare care să asigure 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.

Decizia 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 de imagine.

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Bloc de text

Display: inline;

)

Aceasta este o soluție standard pentru text care se va înfășura în jurul unui bloc cu o imagine. 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, acesta este doar un caz special, deoarece dacă nu există nicio imagine în articol, va exista 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. 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 soluția corectă, care va duce la efectul indicat în imaginea din subsecțiunea care descrie condițiile sarcinii noastre.

Imagine (float: stânga; /*wrap */ margin: 10px; /*captuseala externă pentru frumusețe */ display: 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ă elementele derulante sunt utilizate î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 */ display: inline; /* pentru IE6, astfel încât marginea din stânga să nu se dubleze */). text( afișare: tabel-celulă; zoom: 1 ; /* Cu grijă! Ș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+	-	-

Aranjați un bloc format dintr-o imagine și text, iar textul nu trebuie să curgă în jurul imaginii.

Stânga este corectă, dreapta nu

Condiție suplimentară: lățimea nici a textului, nici a imaginii nu este strict definită. Dacă nu există nicio imagine, textul ocupă toată lățimea alocată.

Soluţie

Să încercăm să scriem stiluri. Totul este clar cu coloana din stânga:

Fotografie ( float: stânga; /* setați ambalajul */ margin:10px; /* indentation for beauty */ display:inline; /* pentru IE6, astfel încât indentarea din stânga să nu se dubleze */ )

Acum desenul este în stânga, iar textul îl înconjoară în dreapta. Dar dacă există mai mult text, acesta va „se scufunda” sub desen (vezi imaginea de mai sus) și nu avem nevoie de asta.

Primul lucru care îmi vine în minte este să „plutim” textul. Dar în acest caz, dacă nu specificați lățimea, textul va cădea sub imagine!

float:left/right va necesita lățime - altfel nimic nu va funcționa!

Ne gândim mai departe... Bună decizie poate părea.descriere( : XXXpx). Într-adevăr, în unele situații această opțiune funcționează. De exemplu, dacă dimensiunea imaginii este încă setată. Să presupunem că este un bloc de știri de cauciuc. Imaginea nu poate fi mai lată, să zicem 200px, dar textul se întinde deja și ocupă toată lățimea rămasă.

Cu toate acestea, această opțiune are dezavantaj semnificativ. Dacă nu există niciun bloc cu o imagine, indentarea va rămâne totuși o gaură incomodă. Desigur, îl puteți elimina folosind selectorul de elemente surori, așa cum este descris în articol, dar în cazul nostru există o altă soluție.

Puteți preveni împachetarea adăugând pur și simplu :hidden; pentru o coloană de text. Astfel vom stabili pentru ea context nou formatare (acest subiect va fi tratat mai detaliat în curând).

Singurul browser care va reacționa incorect la acest lucru este, desigur, IE6. Setăm coloana special pentru ea, de exemplu, „float” (nu trebuie să setați lățimea).

Deci, soluția problemei arată astfel:

Fotografie ( float: left; /* set the float */ margin:10px; /* indentation for beauty */ display:inline; /* pentru IE6, astfel încât indentarea din stânga să nu se dubleze */ ) .description( overflow:hidden ; ) * html .descriere( float:left; )

Ca întotdeauna, în condiții de luptă folosim .