S plavajočimi lastnostmi CSS lahko plavajočo katerokoli sliko na desni strani katerega koli besedila, kot je prikazano s sliko na desni strani tega besedila. Če želite to narediti na svoji spletni strani, sledite spodnjim korakom.

V tem primeru bomo uporabljali zunanjo datoteko CSS. Če uporabljate zunanjo datoteko CSS, lahko na kateri koli strani, ki vsebuje povezavo do datoteke CSS, ustvarite plavajočo sliko. Zunanje datoteke CSS prav tako olajšajo spreminjanje nastavitev, ki jih boste morda želeli prilagoditi v prihodnosti.

1. Ustvarite datoteko CSS. Če za svojo spletno stran že imate datoteko CSS, uredite datoteko CSS in dodajte naslednjo kodo.

2. Dodajte naslednjo kodo v datoteko CSS.

 .floatRight {float: desno; margin-left: 20px} 

Nasvet: Dodajanje float: levo bi sliko plavalo na levi strani besedila.

Če želite imeti na levi plavajoči več slik, dodajte naslednjo vrstico v datoteko CSS.

 .floatRightClear {float: desno; jasno: desno; rob-levo: 20px} 

3. Ko je zgornja koda ustvarjena, shranite datoteko CSS in jo pokličite z vsake HTML strani s kodo, ki je podobna spodnjemu primeru. V našem primeru smo poimenovali CSS datoteko style.css.

4. Na koncu dodajte katero koli sliko, ki jo želite plavati na desni strani vsebnika.