CSS -pakk tekst rundt bildet

Wrap -tekst er når vi justerer teksten rundt et hvilket som helst element. Vi vil diskutere innpakningstekst rundt bildet i CSS hvor vi justerer teksten rundt bildet ved å bruke CSS -egenskapen. Å pakke tekst rundt et bilde er en flott måte å få ethvert nettsted til å se mer tiltalende. Bildet kan nå være i en rekke former, inkludert den grunnleggende firkantede formen. Å pakke et bilde med tekst er oppnåelig ved bruk av HTML og CSS. I denne artikkelen vil vi gi full detalj om innpakning av tekst rundt et bilde i CSS. Vi vil vise deg hvordan bildet ser etter å ha innpakket tekst rundt det.

Eksempel nr. 1:

Vi begynner å skrive kode riktig og utføre den i Visual Studio Code. For å begynne med lager vi en ny fil og velger HTML som språket. Sett nå “!”Og treff“ Enter ”-tasten. Alle HTML nødvendige tagger kan vises her. Vi trenger ikke å skrive alle disse taggene. Etter det bruker vi bare "link" -merket i "hodet" for å sette inn navnet på CSS -filen som vi vil koble til denne HTML -filen. I denne koden satte vi først overskriften og deretter en div med navnet "Square". Inne i denne "firkantede" diven har vi en annen div der vi setter inn bildet ved å bruke "IMG" -merket.

Etter å ha satt bildet i den andre diven, lukker denne diven og generert et avsnitt under denne diven. Når vi fullfører dette avsnittet og lukker det. Deretter lukker vi den første "div" -merket. Vi vil pakke denne teksten rundt dette bildet som vi har satt inn. For innpakning av tekst vil vi gå til CSS -filen, hvor vi bruker "Float" -egenskapen for innpakning av tekst.

Først må vi sette "marginen" på kroppen til "20px" og også samkjøre hele kroppen til "sentrum". Overskriften "H1" er også dekorert med "lilla" som "fargen" på denne overskriften. Vi bruker "font-familiens" og justerer den til "Algerie". Deretter bruker vi "Float" -egenskapen for bildet som vi har satt inn i HTML -koden. Og angi denne "flyte" eiendomsverdien til "venstre", som for bildet å bevege seg til venstre side. Vi justerer også "marginen" på bildet til "4px". "Bredde" og "høyde" på dette bildet er "250px". Vi har også et avsnitt, så vi setter også dette avsnittet. Vi justerer avsnittets tekst og setter den til "rettferdiggjør". Vi setter "fontstørrelse" i dette avsnittet og justerer det til "20px". "Font-Family" for dette avsnittet er "Calibri".

Nedenfor er skjermbildet til koden ovenfor, og du vil se at bildet flyter til venstre side og teksten er pakket til dette bildet på høyre side. Vi pakker avsnittsteksten rundt dette bildet ved hjelp av "Float" -egenskapen i CSS.

Eksempel 2:

Vi bruker ovennevnte eksempel HTML -kode for dette eksemplet, men denne gangen vil vi sette bildet til høyre side ved å bruke "Float" -egenskapen. I denne CSS-koden setter vi marginen til kroppen til “20px” og “tekst-align” -egenskapen justeres til “senteret”. "Fargen" er "grønn" for overskriften, og "font-familiens" er "algerisk". Bruk også "tekstdekorasjon" og plasser "understrek" som verdien av denne egenskapen. Vi flyter bildet til "høyre" slik at avsnittets tekst vises på venstre side av dette bildet. "Marginen" for "IMG" er "5px".

Vi setter også "bredden" til "190px", og også "høyden" er "90px". Under dette bruker vi egenskapen "tekst-align" for "P", og denne "P" beskriver avsnittet. Vi setter den "tekst-align" egenskapen til "rettferdig" nøkkelord og "fontstørrelse" for dette er satt til "18px". "Times New Roman" brukes som "Font-Family".

Du kan se på skjermbildet nedenfor at bildet vises på høyre side på grunn av "Float" -egenskapen og teksten er pakket rundt dette bildet.

Eksempel nr. 3:

Vi skal bruke to forskjellige bilder her. Vi satte det første bildet inne i diven og plasserer deretter et avsnitt. Etter dette avsnittet setter vi igjen et bilde i en annen div og legger igjen et avsnitt under dette bildet. Vi vil justere teksten rundt begge bildene i CSS -koden. Se på hvordan vi vil pakke tekst rundt begge bildene i CSS nedenfor.

"Margin" og den "tekst-align" egenskapen for kroppen er den samme som vi har brukt i eksemplene ovenfor. "Fargen" endres til "rød" denne gangen for overskriften. "Font-Family" er valgt som "algerisk" og også "understrek" denne overskriften. Vi setter "Float" -egenskapen for det første bildet ved å nevne navnet på den første bildeklassen og sette "float" -egenskapen til "høyre". "Margin" vi bruker for det første bildet er "5px". Vi bruker også egenskapen "bredde" og "høyde" og setter begge til "200px".

Deretter justerer vi også det andre bildet og "flyter" dette andre bildet til "venstre", og dets "margin" er det samme som vi har satt til det første bildet. Nå "rettferdiggjør" dette avsnittet og setter "fontstørrelse" til "17px". “Arial” brukes som "font-family" for "P".

To bilder er gjengitt i utgangen. Det første bildet er gjengitt på "venstre" -siden, og det andre bildet er gjengitt på "høyre" side av utgangsskjermen, og all teksten er pakket rundt begge bildene.

Eksempel 4:

I vårt siste eksempel legger vi et avsnitt og deretter en div. Inne i denne DIV -beholderen setter vi også inn et bilde og et avsnitt. Se nå på hvordan vi bruker alle disse avsnittene og justerer bildet og pakker også teksten rundt bildet.

Vi bruker "20px" "margin" og "senter" -verdier for "tekst-align" for kroppen. Deretter setter vi fargen til "Maroon" for overskriften og skriften, "Algerisk" font-familie. Vi "understreker" overskriften. Vi definerer "Float" -egenskapen for bildet ved å spesifisere navnet på bildeklassen og sette "Float" -egenskapen til "Venstre". For dette bildet er "marginen" vi bruker "5px". "Bredden" på dette bildet er "300px" og "høyden" er "300px".

Nå bruker vi noen eiendommer på avsnittet for å gjøre det mer tiltalende. Vi setter "fargen" i avsnittets tekst til "svart". Vi setter også den justerte egenskapen til teksten til "Justify" og setter "18px" for "fontstørrelse". Vi justerer også “Times New Roman” “Font-Family” for avsnittet.

Du kan legge merke til at det er et avsnitt over bildet, et avsnitt under bildet, et avsnitttekst på høyre side av bildet, og bildet flyter til venstre side. Paragrafens tekst vikler seg rundt dette bildet fordi vi setter dette i CSS -koden.

Konklusjon

Fokuset for denne artikkelen er å forklare deg hvordan du pakker tekst rundt bildet i CSS. Vi studerte dette konseptet dyptgående i denne artikkelen og forklarte hva som er innpakning av tekst og hva vi skal gjøre for å pakke teksten rundt bildet. Vi har brukt "float" -egenskapen for å flyte bildet til "venstre" eller "høyre" og pakke tekst rundt dette bildet. Vi har også tatt med flere eksempler her der vi har pakket teksten rundt bildet, inkludert resultatene av alle artikkelenes eksempler. Jeg håper du vil ha en ganske god forståelse av innpakningsteksten rundt bildekonseptet i CSS etter å ha lest denne artikkelen og brukt disse eksemplene i praksis på egen hånd.