Ved å bruke CSS-floategenskapene kan du flyte et bilde til høyre for enhver tekst, som det kan ses med bildet til høyre for denne teksten. For å gjøre dette på websiden din, følg trinnene nedenfor.

I dette eksemplet bruker vi en ekstern CSS-fil. Ved å bruke en ekstern CSS-fil, kan du opprette et flytende bilde på en hvilken som helst side som inneholder en kobling til CSS-filen. Eksterne CSS-filer gjør det også lettere å endre innstillinger du kanskje vil justere i fremtiden.

1. Opprett en CSS-fil. Hvis du allerede har en CSS-fil for din nettside, redigerer du CSS-filen og legger til følgende kode.

2. Legg til følgende kode i CSS-filen.

 .floatRight {float: høyre, marg-left: 20 piksler} 

Tips: Legg til flyte: venstre vil gjøre bildet flyte på venstre side av teksten.

Hvis du vil ha mer enn ett bilde flytende til høyre, legger du også til følgende linje i CSS-filen.

 .floatRightClear {float: høyre klarerings: høyre, marg-left: 20 piksler} 

3. Etter at ovennevnte kode er opprettet, lagre CSS-filen og ring den fra hver HTML-side ved hjelp av kode som ligner på eksempelet nedenfor. I vårt eksempel har vi kalt CSS-filen style.css.

4. Til slutt legger du til hvilket som helst bilde du vil flyte på høyre side av beholderen.