Cum să plasați o imagine în stânga textului pe o pagină Web

Utilizarea CSS pentru a alinia o imagine în partea stângă a unei pagini Web Layout

Uită-te la aproape orice pagină web astăzi și veți vedea o combinație de text și imagini care compun cele mai multe dintre aceste pagini. Este foarte ușor să adăugați text și imagini la o pagină . Textul este codificat folosind etichete HTML standard precum paragrafe, liste și titluri, în timp ce imaginile sunt incluse folosind elementul .

Abilitatea de a face ca acest text și aceste imagini să funcționeze bine împreună este ceea ce pune mari designeri web în afară! Nu doriți ca textul și imaginile dvs. să apară una după alta, ceea ce va face ca aceste elemente de nivel bloc să fie structurate în mod implicit. Nu, doriți un control asupra modului în care textul și imaginile curg împreună în ceea ce va fi, în cele din urmă, designul vizual al site-ului dvs.

Având o imagine care este aliniată la partea stângă a paginii în timp ce textul acelei pagini curge în jurul acesteia este un tratament comun al designului pentru designul tipărit și, de asemenea, pentru paginile web. În termeni web, acest efect este cunoscut ca plutirea imaginii . Acest stil este realizat cu proprietatea CSS pentru "float". Această proprietate permite ca textul să curgă în jurul imaginii aliniate la stânga spre partea dreaptă. (Sau în jurul unei imagini aliniate la dreapta în partea stângă.) Să aruncăm o privire asupra modului de a atinge acest efect vizual.

Începeți cu HTML

Primul lucru pe care va trebui să faceți este să aveți la dispoziție un cod HTML. Pentru exemplul nostru, vom scrie un paragraf de text și vom adăuga o imagine la începutul paragrafului (înainte de text, dar după eticheta de deschidere

). Iată ce arată marcajul HTML:

Textul paragrafului este aici. În acest exemplu, avem o imagine a unei fotografii headshot, așadar acest text ar fi probabil despre persoana căreia îi aparține capul.

În mod implicit, pagina noastră Web va fi afișată cu imaginea deasupra textului. Acest lucru se datorează faptului că imaginile sunt elemente de nivel bloc în HTML. Aceasta înseamnă că browserul afișează pauze de linie înainte și după elementul imagine în mod implicit. Vom schimba acest aspect implicit, apelând la CSS. În primul rând, cu toate acestea, vom adăuga o valoare de clasă elementului nostru de imagine . Această clasă va acționa ca un "cârlig" pe care îl vom folosi mai târziu în CSS.

Textul paragrafului merge aici. În acest exemplu, avem o imagine a unei fotografii headshot, așadar acest text ar fi probabil despre persoana căreia îi aparține capul.

Rețineți că această clasă de "stânga" nu face nimic deloc pe cont propriu! Pentru ca noi să realizăm stilul dorit, trebuie să folosim CSS în continuare.

Stiluri CSS

Folosind codul nostru HTML, incluzând atributul de clasă "stânga", putem trece acum la CSS. Vom adăuga o regulă în foaia de stil care ar pluti în acea imagine și, de asemenea, va adăuga o mică căptușeală lângă ea, astfel încât textul care va înfășura în cele din urmă imaginea nu se va împotrivi prea mult. Aici este CSS pe care îl puteți scrie:

.laf {float: left; umplutura: 0 20px 20px 0; }

Acest stil plutește imaginea din stânga și adaugă o mică căptușeală (utilizând o cotitură CSS) în partea dreaptă și de jos a imaginii.

Dacă ați revizuit pagina care conține acest cod HTML într-un browser, imaginea va fi acum aliniată spre stânga, iar textul paragrafului va apărea în partea dreaptă, cu o distanță corespunzătoare între cele două. Rețineți că valoarea clasei "stânga" pe care am folosit-o este arbitrară. Am fi putut spune ceva, deoarece termenul "stânga" nu face nimic singur. Acest lucru trebuie să aibă un atribut de clasă în HTML care funcționează cu un stil CSS actual care dictează modificările vizuale pe care căutați să le faceți.

Căi alternative de realizare a acestor stiluri

Această abordare de a da elementului de imagine un atribut de clasă și apoi, folosind un stil CSS general care plutește elementul este doar o modalitate de a realiza acest aspect "aliniat la stânga". De asemenea, ați putea să scoateți valoarea de clasă în afara imaginii și să o stylizați cu CSS scriind un selector mai specific. De exemplu, să examinăm un exemplu în care imaginea se află în interiorul unei diviziuni cu o valoare a clasei de "conținut principal".