I HTML brukes bilder til forskjellige formål og vises vanligvis i den vertikale formen separat. Noen ganger kan det hende du må plassere bilder side om side for å lage en stilig utforming eller for å oppfylle et hvilket som helst annet webutviklingsformål.

I denne artikkelen vil vi diskutere hvordan du plasserer to divs side om side i CSS ved hjelp av:

• flyte
• Nett
• Flex

La oss komme i gang!

Metode 1: Plasser to divs side om side i CSS ved hjelp av float

I CSS, “flyte”Eiendom spesifiserer den flytende retningen til et element. Det plasserer et element på høyre eller venstre side av beholderen, og tillater inline og tekstelementer å vikle rundt den.

Syntaks

Syntaksen til float -egenskapen er:

Float: Ingen | Venstre | Høyre

Her er beskrivelsen relatert til den ovennevnte verdien av Float-egenskapen:

• ingen: Det brukes til ingen flytende.
• venstre: Det brukes til å flyte elementer på venstre side.
• Ikke sant: Det brukes til å flyte elementer på høyre side.

Bruker "flyte”Eiendom, du kan også plassere bilder side om side. La oss flytte til eksemplet med å plassere bilder side om side.

Eksempel 1: Plasser to bilder side om side ved hjelp av Float -egenskap

Her har vi lagt til en overskrift ved hjelp av

og opprettet to divs, og tildelte bildekildene til det.

Html

Plasser bilder side om side ved hjelp av CSS Float

I CSS vil vi bruke “.div”For å få tilgang til begge divene som vi har opprettet i HTML -filen. Neste, tilordne verdien av float -egenskapen som “venstre”. Som et resultat vil effekten bli brukt på begge containerne våre.

CSS

.div
FLOAT: Venstre;

Som du ser, har vi plassert bilder side om side:

Eksempel: Plasser to bilder side om side med plass

Hvis du vil skape plass mellom disse to bildene og plassere dem side om side, kan du bruke "bredde”Eiendom og tilordne en verdi til den.

Her vil vi tildele verdien av breddeegenskapen som “300px”:

.div
FLOAT: Venstre;
Bredde: 300px;

Lagre den gitte koden og sjekk ut resultatene:

Metode 2: Plasser bilder side om side i CSS ved hjelp av rutenett

Å plassere to eller mer enn to bilder side om side “Nett”Layout brukes. I utgangspunktet er rutenettet en verdi av displayegenskapen som brukes til å lage en layout som består av rader og kolonner.

Syntaks

Syntaks for displayegenskapen med nettoppsett er gitt som følger:

Display: rutenett;

La oss flytte til eksemplet.

Eksempel

Her vil vi lage fire underdeler i de viktigste divnavnene som “foreldre”Og legg til bilder i det ved hjelp av tag.

Html

Plasser bilder side om side ved hjelp av CSS -rutenett

Neste, i CSS -delen, vil vi bruke “.foreldre”For å få tilgang til foreldre -divet og sette verdien av visningsegenskapen som“Nett”. Etter det vil vi sette brøkdelen ved å bruke “rutenett-template-kolonner”Eiendom for å skape plass for kolonner. Spesifisere “1fr”Tre ganger vil skape“tre”Kolonner, som betyr at alle divene har lik plass. Videre vil vi stille inn gapet mellom kolonnene ved å bruke kolonne-gap-egenskapen og angi verdien som "5px”:

.foreldre
Display: rutenett;
rutenett-template-kolonner: 1fr 1fr 1fr;
kolonne-gap: 5px;

Når du har fullført CSS -koden, utfører du HTML -filen og sjekk utdataene:

Metode 3: Plasser to bilder side om side i CSS ved hjelp av flex

“Flex”Er verdien av visningsegenskapen som tillater å plassere elementer side om side. I et slikt scenario vil det bli satt elementer i henhold til visningsportet til skjermbildet.

Syntaks

Syntaksen til displayegenskap med flex er:

Display: Flex;

La oss flytte til eksemplet:

Eksempel

Vi vil vurdere den forrige HTML -filen og legge til tre underdeler inne i hoveddiven og spesifisere forskjellige bildekilder til den:

Plasser bilder side om side ved hjelp av CSS Flex

I CSS, sett verdien av displayegenskapen som “Flex”Og sett kolonne-gap som“5px”:

.foreldre
Display: Flex;
Gap: 5px;

Dette vil gi følgende resultat:

Vi har gitt tre enkle måter å plassere bilder side om side i HTML og CSS.

Konklusjon

Bilder er plassert side om side ved å bruke tre forskjellige metoder for CSS, som er "Flex”Og“Nett”Verdier for visningsegenskapen og“flyte”Eiendom. CSS tillater deg også å plassere plassen eller gapet mellom disse tilstøtende bildene. I denne guiden har vi diskutert disse tre metodene i detalj og gitt eksempler på hver metode for å plassere bilder side om side ved hjelp av CSS.