Cod HTML pentru a înfășura textul în jurul imaginii

2019

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 utilizând HTML. Rețineți că nu este necesar să utilizați CSS pentru a înfășura textul.

Cu toate acestea, în aceste zile W3C recomandă utilizarea CSS în loc de HTML pentru aceste tipuri de sarcini. Voi 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.

Wrap text în jurul imaginii folosind HTML

Lorem ipsum dolor stați amet, consectetur adipiscing elit. Fusce dictează gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum socializează penatibus și mărirea părților, părinții se ridică. Mai mult decât atât. Curabitur molestie posuere laoreet. Ut pellentesque nunc în lorem egestas non imperdiet enim congue.

Pentru ca textul să fie înfășurat de-a lungul părții drepte a imaginii, trebuie să aliniați imaginea la stânga:

Textul dvs. este aici.

Dacă doriți ca textul să apară în stânga și imaginea să apară în extrema dreaptă, schimbați parametrul de aliniere la "dreapta".

Textul dvs. este aici.

Asta e! Destul de ușor, nu? 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:

Textul dvs. este aici.

Codul de mai sus utilizează 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țiul alb la dreapta.

Practic, 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:

Textul dvs. este aici.

Deci, este destul de simplu să folosiți HTML pentru a efectua această sarcină, dar din nou, este posibil să nu funcționeze bine pentru site-urile receptive.

Încărcați textul în jurul imaginii utilizând CSS

Modul mai bun de a înfășura textul în jurul unei imagini este de a utiliza 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 ar trebui să mai faceți asta niciodată. În schimb, ar trebui să aveți un fișier separat numit foaie de stil care să conțină întregul cod CSS.

În eticheta IMG, pur și simplu atribuiți o etichetă unei clase și dați-i un nume. În exemplul meu, am numit clasa rămasă . În foaia de stil, tot ce trebuie să fac este să adaug următorul cod:

 .sunt {float: left; umplutură: 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 ao pune î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ă!