Aveți nevoie de cod pentru a înfășura textul în jurul unei imagini? În mod normal, atunci când creați o pagină HTML, totul curge liniar, adică un bloc direct unul după altul. Toate postările mele anterioare sunt un exemplu de acest lucru, adică text, apoi imagine, apoi text, etc. Uneori este posibil să doriți să includeți text lângă o imagine în loc de sub ea. Acest lucru se numește înfășurarea textului în jurul imaginii. Este de fapt destul de ușor să înfășurați textul folosind HTML. Rețineți că nu trebuie să utilizați CSS pentru a împacheta textul.
În aceste zile, W3C recomandă utilizarea CSS în loc de HTML pentru astfel de sarcini. Vom menționa ambele metode de mai jos, dar dacă puteți, este mai bine să utilizați CSS, deoarece este mai adaptabil la modelele de site responsabile.
Înfășurați textul în jurul imaginii folosind HTML
Lorem ipsum dolor stau amet, consectetur adipiscing elit. Fusce dictează gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum socializează penatibus și măriți, participă la monte, nascetur ridiculus mus. Trimiteți-vă un fel de vitae augue lobortis dictum. Curabitur molestie posuere laoreet.
Pentru a avea textul înfășurat de-a lungul părții drepte a imaginii, trebuie să aliniați imaginea la stânga:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Dacă doriți ca textul să apară în stânga și imaginea să apară în extrema dreaptă, schimbați parametrul de aliniere la "dreapta".
/ s>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictează gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum socializează penatibus și măriți, participă la monte, nascetur ridiculus mus. Trimiteți-vă un fel de vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc în lorem egestas non imperdiet enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
Asta este! Destul de ușor de făcut? Singura dată când doriți să utilizați CSS este dacă doriți să adăugați margini la imagini, astfel încât să existe un spațiu între text și imagine.
Puteți adăuga margini unei imagini utilizând următorul cod de styling CSS:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
Codul de mai sus folosește elementul MARGIN CSS pentru a adăuga 10 pixeli de spațiu alb în partea dreaptă a imaginii. Deoarece am aliniat imaginea din stânga, vrem să adăugăm spațiile albe spre dreapta.
În principiu, cele patru numere reprezintă TOP RIGHT BOTTOM LEFT. Deci, dacă doriți să adăugați spațiul alb într-o imagine aliniată la dreapta, ați face acest lucru:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Deci este destul de simplu să utilizați HTML pentru a efectua această sarcină, din nou, s-ar putea să nu funcționeze bine pentru site-urile receptive.
Înfășurați textul în jurul imaginii utilizând CSS
Modul mai bun de a înfășura textul în jurul unei imagini este să utilizați CSS. Vă dă un control mai bun al cerealelor asupra poziționării elementelor și funcționează mai bine cu standardele moderne de codificare. Chiar dacă am inclus CSS direct în eticheta de imagine din exemplul HTML , nu trebuie să mai faceți asta niciodată. În schimb, ar trebui să aveți un fișier separat numit o foaie de stil care să conțină întregul cod CSS.
În tag-ul IMG, pur și simplu atribuiți o etichetă unei clase și dați-i un nume. În exemplul meu, am numit clasa stânga. În foaia de stil, tot ce trebuie să fac este să adaug următorul cod:
.left {
float: left;
padding: 0 10px 0 0;}
După cum puteți vedea, am adăugat 10px de umplutură în partea dreaptă a imaginii aliniate la stânga . De asemenea, am folosit proprietatea float pentru a muta imaginea din fluxul normal al documentului și a pus-o în partea stângă a containerului părinte. După cum puteți vedea, este mult mai curat decât adăugarea întregului cod la eticheta IMG în sine. Este, de asemenea, mai ușor de gestionat și puteți utiliza mult mai multe proprietăți CSS pentru a particulariza aspectul paginii dvs. Web. Dacă aveți întrebări, nu ezitați să comentați. Bucurați-vă!