CSS float -ominaisuuksien avulla voit “kelluttaa” minkä tahansa kuvan niin, että se pysyy sivussa ja teksti virtaa sen ympärillä. Voit tehdä tämän verkkosivullasi noudattamalla alla olevia ohjeita.
Luo oikealle tasattu kuva
Alla olevassa esimerkissä käytämme ulkoista CSS-tiedostoa. Ulkoisen CSS-tiedoston avulla voit luoda kelluvan kuvan mille tahansa sivulle, joka sisältää linkin CSS-tiedostoon. Ulkoiset CSS-tiedostot helpottavat myös asetusten muuttamista, joita haluat mahdollisesti muuttaa tulevaisuudessa.
- Luo CSS-tiedosto tai muokkaa olemassa olevaa CSS-tiedostoa.
- Lisää seuraava koodi CSS-tiedostoon.
.floatRight{float:right;margin-left:20px}
Kärki
Lisäämällä float:left kuvan kelluu tekstin vasemmalla puolella.
Jos haluat, että oikealla kelluu useampi kuin yksi kuva, lisää myös seuraava rivi CSS-tiedostoon.
.floatRightClear{float:right;clear:right;margin-left:20px}
- Kun yllä oleva koodi on lisätty, tallenna CSS-tiedosto ja kutsu se jokaiselta HTML-sivulta käyttämällä alla olevan esimerkin kaltaista koodia. Esimerkissämme olemme nimenneet CSS-tiedoston style.css.
<link rel="stylesheet" href="style.css" Type="text/css" media="all">
- Lisää class=”floatRight” mihin tahansa kuvaan, jonka haluat kelluvan säilön oikealla puolella.
<img src="https://www.computerhope.com/logo.gif" class="floatRight">
