Če vas zanima, kako lebdeti sliko desno od besedila, je to dokaj preprosta naloga. Obstaja veliko situacij, ko programerji želijo, da se slika na spletni strani prikaže znotraj besedila z besedilom, ki teče ali je ovito okoli njega. Manipuliranje s slikami je podobno manipuliranju z besedilom, zato, če imate s slednjim izkušnje, ta postopek sploh ne bi smel biti težak.
Pravzaprav je z lastnostjo float CSS enostavno plavati sliko desno od besedila in besedilo pretakati okoli nje na leva stran. Uporabite to petminutno vadnico, če želite izvedeti, kako.
Nastavitev postavitve s plovcem
Ta osnovna postavitev bo ustvarila prostor za vaše besedilo in lebdela sliko desno od besedila. Seveda so te postavitve lahko bolj zapletene, toda ta primer vam bo pokazal osnovno načelo dela s floatom in besedilom.
Ob predpostavki, da že imate dokument HTML, s katerim delate, in ločeno tabelo slogov CSS, najprej začnite z ustvarjanjem novega divja, ki bo deloval kot vrstica, ki vsebuje vaš plavajoči element.
Temu novemu divju dajte dva razreda, vsebnik in clearfix. Obstaja veliko načinov, kako to rešiti, in imena so povsem vaša izbira, vendar vam bodo pomagala ostati organizirana in določiti postavitev.
-
V CSS določite, kako želite, da se vaš vsebnik prilega vaši celotni postavitvi. Ta primer bo naredil samo vrstico s polno širino.
.container {
širina: 100%;
višina: 25rem;
} -
Nato poskrbite za razred clearfix. Popravek je potreben, ker lahko float v vaši postavitvi ustvari nekaj čudnih napak. Določitev lastnosti "overflow" v čisti popravki preprečuje, da bi plavajoči elementi odtekli iz njihovega določenega prostora.
.clearfix {
preliv: samodejno;
} -
Zdaj lahko ustvarite element v divju vsebnika in ga plavate v desno. Če ovijete besedilo okoli slike, bi bila to vaša slika. Ustvari element in mu daj razred za lastnost float.
-
Ustvari razred za svoj plovec. Verjetno boste želeli vanj vstaviti tudi kakšen styling, če boste izdelovali več enakih elementov. V nasprotnem primeru lahko za svoj slog uporabite ločen razred.
.plava-desno {
plovec: desno;
širina: 300px;
višina: 200px;
barva ozadja: rdeča;
marža: 0 0 0.5rem 0.5rem
} -
Če želite zaviti besedilo okoli tega plavajočega elementa, vstavite besedilo zdaj. Postavite ga kamor koli v posodo, pred ali za plavajočim elementom.
Nekaj besedila
Več besedila
...in tako naprej.
-
Osvežite svojo stran in preverite rezultat.
Zavijanje
In to naredi. Zdaj vidite, da lebdenje slike v desno sploh ni težko. Morda vas zanima tudi plavajoča slika v levo in plavajoča v sredino. Čeprav je prvi premik mogoč, slike ne morete lebdeti v sredino, saj bi to običajno zahtevalo postavitev v dveh stolpcih.