Hvis du er interessert i å lære å flyte et bilde til høyre for teksten, er det en ganske enkel oppgave. Det er mange situasjoner der programmerere vil at et bilde på en webside skal vises inne i teksten med teksten som flyter eller vikles rundt den. Manipulere bilder ligner på å manipulere tekst, så hvis du har erfaring med sistnevnte, bør denne prosessen ikke være vanskelig i det hele tatt.
Faktisk, med CSS float-egenskapen, er det enkelt å flyte bildet ditt til høyre for teksten og få teksten til å flyte rundt på venstre side. Bruk denne fem-minutters opplæringen for å lære hvordan.
Sette opp et oppsett med flyt
Dette grunnleggende oppsettet vil skape et mellomrom for teksten din og flyte et bilde til høyre for den teksten. Gjerne kan disse oppsettene bli mer kompliserte, men dette eksemplet viser deg det grunnleggende prinsippet bak å jobbe med float og tekst.
Forutsatt at du allerede har et HTML-dokument du jobber med, og et eget CSS-stilark, begynn med å opprette en ny div for å fungere som raden som inneholder det flytende elementet.
Gi den nye div to klasser, container og clearfix. Det er mange måter å håndtere dette på, og navnene er helt ditt valg, men disse vil hjelpe deg å holde orden og etablere layoutet ditt.
-
I CSS definerer du hvordan du vil at containeren din skal passe inn i den generelle utformingen. Dette eksemplet skal bare gjøre det til en rad i full bredde.
.container {
bredde: 100%;
høyde: 25rem;
} -
Deretter tar du vare på clearfix-klassen. Clearfix er nødvendig fordi float kan skape noen rare feil i oppsettet ditt. Å definere "overløp" -egenskapen i clearfix stopper de flytende elementene fra å blø ut av deres angitte rom.
.clearfix {
overløp: auto;
} -
Nå kan du opprette et element i container div og flyte det til høyre. Hvis du pakker tekst rundt et bilde, vil dette være bildet ditt. Lag elementet og gi det en klasse for float-eiendommen.
-
Lag klassen for flottøren din. Du vil sannsynligvis ønske å kaste litt styling der også, hvis du lager flere identiske elementer. Ellers kan du bruke en egen klasse for stylingen din.
. float-right {
flyte: høyre;
bredde: 300px;
høyde: 200px;
bakgrunnsfarge: rød;
margin: 0 0 0.5rem 0.5rem
} -
Hvis du ønsker å pakke tekst rundt det flytende elementet, setter du inn teksten nå. Legg den hvor som helst i beholderen, enten før eller etter det flytende elementet.
Noe tekst
Mer tekst
...og så videre.
-
Oppdater siden din, og sjekk resultatet.
Innpakning
Og det gjør det. Nå ser du at det ikke er vanskelig å flyte et bilde til høyre. Du kan også være interessert i å flyte et bilde til venstre og flyte det til sentrum. Selv om det første trekket er mulig, kan du dessverre ikke flyte et bilde til midten, da det vanligvis krever to-kolonnelayout.