Grafikk og bilder gjør websider mer brukervennlig. I tillegg trekker bilder brukerens oppmerksomhet og hjelp til å style eller designe applikasjonen. Applikasjonen som har flere bilder får flere visninger. Dessuten er det flere måter å justere bildeposisjonene i CSS, for eksempel å bruke Flexbox, rutenett, flyteegenskaper og mange flere.

Oppskrivningen vil diskutere forskjellige metoder for å ha bilder og tekst side om side i HTML.

Forutsetning: Opprett en HTML -fil

Følg de viktigste emnet i innlegget, følg de undergitte instruksjonene for å lage en HTML-fil:

• Legg til en "”Element og navn på klassen”Linux-detaljer”.
• Legg til to “” barneelementer i henholdsvis hoved "for bilde og tekst. Tilordne “”Tag a Class”Linux-img" og "

  ”Tag med klassen”tekst”.

• Juster skriftstørrelsen "

  ”Tag ved å bruke“skriftstørrelse”Eiendom.

• Inkluderer litt tekst i "

  " stikkord.

Html

Linuxhint

Kvalitetsvideoer, beste artikler

Metode 1: Hvordan ha bilde og tekst side om side ved å bruke "Float" -egenskap?

CSS “flyte”Eiendom brukes til å bestemme elementets posisjon, enten den er fløt til venstre eller høyre eller ingen. Et flytende element vil være omgitt av elementene ved siden av.

Stil “Linux-Details” -klasse

For å gjøre det, først, stil "Linux-detaljer”Klasse ved å tilordne følgende egenskaper:

.Linux-Detalails
Bredde: 80%;
polstring: 1%;

“.Linux-detaljer”Brukes til å få tilgang til den opprettede beholderen. Denne klassen blir deretter brukt med de under-forklarte egenskapene:

• “bredde”Bestemmer elementets bredde.
• “polstring”Tildeler plass rundt innholdet i elementet.

Stil “Linux-Img” -klasse

CSS “flyte”Eiendom er lagt til i“Linux-img”Klasse for å justere bildeposisjonen:

.linux-img
Høyde: 150px;
Bredde: 150px;
Margin-venstre: 30%;
FLOAT: Venstre;

Her:

• “høyde”Justerer elementets høyde.
• “margin-venstre”Legger litt plass til venstre side av elementet.
• “flyte”Eiendom med verdien”venstre”Flyter bildet til venstre. Som et resultat blir tekstinnholdet ved siden av plassert etter det.

Produksjon

Metode 2: Hvordan ha bilde og tekst side om side ved å bruke "rutenett" -egenskaper?

CSS “Nett”Eiendom gir en enklere måte å designe en nettstedoppsett som gir rader og kolonner.

Stil “Linux-Details” -klasse

Nå, “Nett”Eiendom er plassert i“Linux-detaljer”Klasse:

.Linux-Detalails
Display: rutenett;
Align-elementer: sentrum;
rutenett-template-kolonner: 1fr 1fr;
kolonne-gap: 5px;

“Linux-detaljer”Klasse tildeles følgende egenskaper:

• “vise”Eiendom med verdien tildelt som“Nett”Gir en layout som inneholder rader og kolonner.
• “Align-elementer”Med verdien”senter”Plassert brukes til å plassere elementet i sentrum.
• “rutenett-template-kolonner”Eiendom med verdien”1fr 1fr”Gir to søyler med en brøkdel hver.
• “kolonne-gap”Eiendom gir plass mellom kolonnene.

Stil “IMG” -element

IMG
Maks bredde: 100%;
Maks-høyde: 100%;

“”Element er gitt de under-nevnte egenskapene:

• “Maks bredde”Eiendom bestemmer elementets maksimale bredde.
• “maksimal”Definerer elementets maksimale høyde.

Produksjon

Metode 3: Hvordan ha bilde og tekst side om side ved å bruke "flex" -egenskap?

CSS “Flex”Eiendom plasserer elementene på rad (som standard).

Stil “Linux-Details” -klasse

.Linux-Detalails
Display: Flex;
Align-elementer: sentrum;
Justify-Content: Center;
polstring: 5%;

Her er forklaringen på egenskapene nevnt ovenfor:

• “vise”Eiendom med verdien”Flex”Vil plassere“”Elements innhold på rad.
• “Align-elementer”Justerer de fleksible varene vertikalt.
• “Justify-Content”Angir det fleksible elementets justering horisontalt.

Stil "tekst" -klasse

.tekst
Font-størrelse: 20px;
Padding-venstre: 20px;

“tekst”Klasse er stylet ved å bruke følgende egenskaper:

• “skriftstørrelse”Eiendom setter størrelsen på skriften.
• “Padding-venstre”Legger til plass til venstre for teksten.

Produksjon

Det handlet om å ha et bilde og tekst side om side ved hjelp av forskjellige egenskaper.

Konklusjon

Flere egenskaper kan brukes til å plassere et bilde og tekst side om side på et nettsted. De mest brukte egenskapene er “flyte”,“Nett”, Og“Flex”. For å gjøre det, lage en “”Container. Legg til to "" "elementer for bildet og tekst. Bruk deretter en av de nevnte egenskapene på den viktigste "" -koden for justeringer av bildet og tekstposisjonen. Denne bloggen har forklart forskjellige egenskaper for å plassere et bilde og tekst side om side.