Upotrijebite CSS Align Left za plutanje slike web stranice lijevo od teksta

Elementi na razini bloka na web stranici pojavljuju se u slijedu. Da biste poboljšali izgled ili korisnost stranice, možete izmijeniti taj redoslijed zamatanjem blokova, uključujući slike, tako da tekst teče oko slika.

U smislu web dizajna, ovaj je efekt poznat kao plutajuća slika. To se postiže pomoću CSS svojstvoplutati, koji omogućuje tekst da teče oko slike poravnate ulijevo na desnu stranu (ili oko slike poravnate udesno na njezinu lijevu stranu).

Počnite s HTML-om

Ovaj primjer dodaje sliku na početku odlomka (prije teksta, ali nakon otvaranja

označiti). Evo početnog HTML označavanja:

Tekst odlomka ide ovdje. U ovom primjeru imamo sliku fotografije snimke glave, pa bi ovaj tekst mogao opisati osobu na snimci glave.

Prema zadanim postavkama, stranica će se prikazivati ​​sa slikom iznad teksta, jer su slike elementi na razini bloka u HTML-u. To znači da preglednik prema zadanim postavkama prikazuje prijelome redaka prije i poslije elementa slike. Da biste promijenili ovaj zadani izgled pomoću CSS-a, dodajte vrijednost klase (

lijevo) na element slike da služi kao kuka na koju se mogu pričvrstiti svojstva.

Tekst odlomka ide ovdje. U ovom primjeru imamo sliku fotografije snimke glave, pa bi ovaj tekst mogao opisati osobu na snimci glave.

Imajte na umu da ova klasa sama ništa ne radi. CSS postići će željeni stil.

Dodavanje CSS stilova

Dodajte ovo pravilo na web mjesto tablica stilova:

.left {
plutaju: lijevo;
popunjavanje: 0 20px 20px 0;
}

Ovaj stil pluta s razredom lijevo s lijeve strane stranice i dodaje malo podmetanje s desne i donje strane slike, tako da se tekst ne naslanja na nju.

U pregledniku bi se slika sada poravnala ulijevo; tekst bi se pojavio zdesna s razmakom između njih dvoje.

Drugi načini postizanja ovih stilova

Također biste mogli skinuti vrijednost klase sa slike i oblikovati je CSS-om tako da napišete precizniji selektor. U donjem primjeru slika se nalazi unutar podjele s glavni sadržaj vrijednost klase.

Tekst odlomka ide ovdje. U ovom primjeru imamo sliku fotografije snimke glave, pa bi ovaj tekst mogao opisati osobu na snimci glave.

Za oblikovanje ove slike napišite CSS:

.main-content img { 
plutaju: lijevo; 
popunjavanje: 0 20px 20px 0;
}

U ovom se scenariju slika poravnava ulijevo, a tekst pluta oko nje kao i prije, ali bez dodatne vrijednosti klase u oznaci. Ako to učinite opsežno, možete pomoći u stvaranju manje HTML datoteke, kojom će se lakše upravljati i može poboljšati izvedbu.

Izbjegavajte umetnute stilove

Napokon, mogli biste koristiti umetnuti stilovi:

Tekst odlomka ide ovdje. U ovom primjeru imamo sliku fotografije snimke glave, pa bi ovaj tekst mogao opisati osobu na snimci glave.

To, međutim, nije preporučljivo jer kombinira stil elementa sa svojim strukturnim oznakama. Najbolji primjeri iz prakse nalažu da stil i struktura stranice ostanu odvojeni. Ova je segregacija posebno korisna kada trebate promijeniti izgled stranice i potražiti različite veličine zaslona i uređaje s odgovarajućim web mjestom.