Hvis du er interesseret i at lære at flyde et billede til højre for teksten, er det en ret simpel opgave. Der er mange situationer, hvor programmører ønsker, at et billede på en webside skal vises inde i teksten med teksten, der flyder eller vikles rundt om den. Manipulering af billeder svarer til manipulation af tekst, så hvis du har erfaring med sidstnævnte, bør denne proces slet ikke være hård.
Faktisk er det med CSS float-ejendommen let at flyde dit billede til højre for teksten og få teksten til at flyde rundt på venstre side. Brug denne tutorial på fem minutter for at lære hvordan.
Opsætning af et layout med flydende
Dette grundlæggende layout skaber plads til din tekst og flyder et billede til højre for teksten. Bestemt kan disse layouts blive mere komplicerede, men dette eksempel viser dig det grundlæggende princip bag at arbejde med float og tekst.
Forudsat at du allerede har et HTML-dokument, du arbejder med, og et separat CSS-stilark, skal du starte med at oprette en ny div, der fungerer som rækken, der indeholder dit flydende element.
Giv den nye div to klasser, container og clearfix. Der er mange måder at håndtere dette på, og navnene er helt dit valg, men disse hjælper dig med at holde orden og etablere dit layout.
-
I din CSS skal du definere, hvordan du vil have din container til at passe inden for dit overordnede layout. Dette eksempel vil bare gøre det til en række i fuld bredde.
.container {
bredde: 100%;
højde: 25rem;
} -
Dernæst skal du tage sig af clearfix-klassen. Clearfix er nødvendigt, fordi float kan skabe nogle ulige fejl i dit layout. Definition af egenskaben "overløb" i clearfix forhindrer de flydende elementer i at bløde ud af deres udpegede rum.
.clearfix {
overløb: auto;
} -
Nu kan du oprette et element i din containerdiv og flyde det til højre. Hvis du indpakker tekst omkring et billede, ville dette være dit billede. Opret elementet, og giv det en klasse for float-ejendommen.
-
Opret klassen til din float. Du vil sandsynligvis også kaste noget styling derinde, hvis du laver flere identiske elementer. Ellers kan du anvende en separat klasse til din styling.
. flyde-højre {
flyde: højre;
bredde: 300px;
højde: 200px;
baggrundsfarve: rød;
margin: 0 0 0.5rem 0.5rem
} -
Hvis du ønsker at pakke tekst omkring det flydende element, skal du indsætte din tekst nu. Anbring det hvor som helst i containeren, enten før eller efter det flydende element.
Noget tekst
Mere tekst
...og så videre.
-
Opdater din side, og tjek resultatet.
Afslutter
Og det gør det. Nu kan du se, at det ikke er svært at flyde et billede til højre. Du kan også være interesseret i at flyde et billede til venstre og flyde det til midten. Selvom det første træk er muligt, kan du desværre ikke flyde et billede til midten, da det typisk kræver et layout med to søjler.