Ako ste zainteresirani za učenje lebdenja slike desno od teksta, to je prilično jednostavan zadatak. Mnogo je situacija u kojima programeri žele da se slika na web stranici pojavi unutar teksta s tekstom koji teče ili se omotava oko nje. Manipuliranje slikama je slično manipuliranju tekstom, pa ako imate iskustva s potonjim, ovaj postupak uopće ne bi trebao biti težak.
Zapravo, s CSS svojstvom float, lako je prebaciti vašu sliku desno od teksta i pustiti da tekst teče oko nje na lijeva strana. Koristite ovaj petominutni vodič da biste naučili kako.
Postavljanje izgleda s plovkom
Ovaj osnovni izgled stvorit će prostor za vaš tekst i plutajući sliku s desne strane tog teksta. Svakako, ovi se izgledi mogu zakomplicirati, ali ovaj će vam primjer pokazati osnovni princip rada s floatom i tekstom.
Pod pretpostavkom da već imate HTML dokument s kojim radite i zasebnu CSS tablicu stilova, započnite stvaranjem novog div-a koji će djelovati kao redak koji sadrži vaš plutajući element.
Dajte tom novom div dvije klase, spremnik i clearfix. Postoji mnogo načina da se to riješi, a imena su u potpunosti vaš izbor, ali oni će vam pomoći da ostanete organizirani i uspostavite svoj izgled.
-
U CSS-u definirajte kako želite da se vaš spremnik uklapa u vaš cjelokupni izgled. Ovaj će primjer samo napraviti redak pune širine.
.container {
širina: 100%;
visina: 25rem;
} -
Zatim se pobrinite za klasu clearfix. Clearfix je neophodan jer float može stvoriti neke neobične propuste u vašem rasporedu. Definiranje svojstva "overflow" u clearfix-u zaustavlja plutajuće elemente da ne iskrvare iz njihovog određenog prostora.
.clearfix {
preljev: auto;
} -
Sada možete stvoriti element u vašem div kontejnera i plutati ga udesno. Ako omotavate tekst oko slike, ovo bi bila vaša slika. Stvorite element i dajte mu klasu za svojstvo float.
-
Stvorite klasu za svoj plovak. Vjerojatno ćete i tamo poželjeti ubaciti malo stylinga ako izrađujete više identičnih elemenata. U suprotnom, možete primijeniti zasebnu klasu za svoj styling.
.plovka-desno {
plutati: desno;
širina: 300px;
visina: 200px;
boja pozadine: crvena;
marža: 0 0 0.5rem 0.5rem
} -
Ako želite omotati tekst oko tog plutajućeg elementa, umetnite svoj tekst sada. Stavite ga bilo gdje u spremnik, bilo prije ili poslije plutajućeg elementa.
Neki tekst
Više teksta
...i tako dalje.
-
Osvježite svoju stranicu i provjerite rezultat.
Završavati
I to je to. Sad vidite da plutanje slike udesno uopće nije teško. Možda će vas zanimati plutanje slike ulijevo i plutanje u središte. Iako je prvi pomak moguć, nažalost, sliku ne možete prebaciti u središte, jer bi to obično zahtijevalo raspored u dva stupca.