Utilizați Aliniați la stânga CSS pentru a flota o imagine a site-ului în partea stângă a textului

Elemente la nivel de bloc într-o pagină web apar în ordine secvențială. Pentru a îmbunătăți aspectul sau utilitatea paginii, puteți modifica acea comandă prin împachetarea blocurilor, inclusiv a imaginilor, astfel încât textul curge în jurul imaginilor.

În termeni de design web, acest efect este cunoscut sub numele de flotare a imaginii. Acest lucru se realizează cu Proprietate CSSpluti, care permite textului să curgă în jurul imaginii aliniate la stânga în partea dreaptă (sau în jurul unei imagini aliniate la dreapta în partea stângă).

Începeți cu HTML

Acest exemplu adaugă o imagine la începutul unui paragraf (înainte de text, dar după deschidere

etichetă). Iată marcajul HTML inițial:

Textul paragrafului merge aici. În acest exemplu, avem o imagine a unei fotografii cu capul, astfel încât acest text ar putea descrie persoana din fotografia cu capul.

În mod implicit, pagina se va afișa cu imaginea de deasupra textului, deoarece imaginile sunt elemente la nivel de bloc în HTML. Aceasta înseamnă că browserul afișează pauzele de linie înainte și după elementul de imagine în mod implicit. Pentru a schimba acest aspect implicit folosind CSS, adăugați o valoare a clasei (

stânga) la elementul de imagine pentru a servi drept cârlig de care pot fi atașate proprietăți.

Textul paragrafului merge aici. În acest exemplu, avem o imagine a unei fotografii cu capul, astfel încât acest text ar putea descrie persoana din fotografia cu capul.

Rețineți că această clasă nu face nimic de la sine. CSS va atinge stilul dorit.

Adăugarea stilurilor CSS

Adăugați această regulă la cea a site-ului foaie de stil:

.stânga {
plutește la stânga;
umplutură: 0 20px 20px 0;
}

Acest stil plutește orice în clasă stânga în stânga paginii și adaugă puțin căptușeală în partea dreaptă și în partea de jos a imaginii, astfel încât textul să nu se oprească.

Într-un browser, imaginea va fi acum aliniată la stânga; textul ar apărea în dreapta sa cu spațiu între cele două.

Alte modalități de a atinge aceste stiluri

De asemenea, puteți scoate valoarea clasei de pe imagine și o puteți stiliza cu CSS scriind un selector mai specific. În exemplul de mai jos, imaginea se află în interiorul unei diviziuni cu a conținut principal valoarea clasei.

Textul paragrafului merge aici. În acest exemplu, avem o imagine a unei fotografii cu capul, astfel încât acest text ar putea descrie persoana din fotografia cu capul.

Pentru a stiliza această imagine, scrieți acest CSS:

.main-content img { 
plutește la stânga; 
umplutură: 0 20px 20px 0;
}

În acest scenariu, imaginea este aliniată la stânga, cu textul plutind în jurul său ca înainte, dar fără valoarea de clasă suplimentară din marcaj. A face acest lucru la scară poate ajuta la crearea unui fișier HTML mai mic, care va fi mai ușor de gestionat și poate îmbunătăți performanța.

Evitați stilurile în linie

În cele din urmă, ați putea folosi stiluri inline:

Textul paragrafului merge aici. În acest exemplu, avem o imagine a unei fotografii cu capul, astfel încât acest text ar putea descrie persoana din fotografia cu capul.

Acest lucru nu este recomandabil, totuși, deoarece combină stilul unui element cu marcajul său structural. Cele mai bune practici dictează faptul că stilul și structura unei pagini rămân separate. Această separare este utilă mai ales atunci când trebuie să modificați aspectul paginii și să căutați diferite dimensiuni de ecran și dispozitive cu un site web receptiv.