3 enkle måter å plassere to divs side om side i CSS

DIVS brukes hovedsakelig til å lage forskjellige seksjoner i HTML, som kan styles deretter ved hjelp av CSS. Noen ganger kan det hende du må plassere to divs side om side for å lage en stilig layout. For dette formålet gir CSS forskjellige metoder som:

• Ved bruk av "Nett”
• Ved bruk av "Flex”
• Ved bruk av "flyte”

I denne artikkelen vil vi diskutere hver av de nevnte tilnærmingene en etter en og gi et passende eksempel på hver metode.

Så la oss komme i gang!

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

CSS “Nett”Layout lar brukeren plassere to eller flere to divs side om side. 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 nedenfor:

Display: rutenett

La oss nå sjekke ut et eksempel relatert til å plassere to divs side om side i CSS ved hjelp av nettoppsettet.

Eksempel

Her vil vi lage to barnedivs inne i overordnede div, og ha klassenavnene som "foreldre”,“barn”Og“barn”:

Neste i CSS -delen, bruk ".foreldre”For å få tilgang til foreldre -divet og sette verdien av visningsegenskapen som“Nett”. Neste, sett brøkdelen ved å bruke “rutenett-template-kolonner”Eiendom for å skape plass for kolonner. I vårt tilfelle vil vi sette brøk som "1fr”Og“1fr”, Som betyr at begge divene har skaffet seg lik plass. Videre vil vi stille inn gapet mellom to kolonner ved å bruke kolonne-gap-egenskapen og angi verdien som "25px”.

CSS:

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

I neste trinn bruker vi “.barn”For å få tilgang til begge barn Div og sette høyden på DIVS som“250px”Og sett bakgrunnsfargen som“RGB (253, 5, 109)”:

.barn
Høyde: 250px;
Bakgrunn: RGB (253, 5, 109);

Dette vil vise følgende utfall:

La oss flytte til en annen metode for å plassere div side om side

Metode 2: Plasser to divs side om side i CSS ved hjelp av flex

“Flex”Er verdien av visningsegenskapen som tillater å plassere to divs side om side. Denne egenskapen brukes til å sette en fleksibel lengde for den fleksible varen. Det krymper eller dyrker flex -elementet slik at den passer i beholderen.

Syntaks

Syntaksen til displayegenskap med flex er gitt nedenfor:

Display: Flex;

La oss flytte til eksemplet for å forstå det uttalte konseptet.

Eksempel

Vi vil vurdere den samme HTML -filen og bruke "Flex”Til foreldrebeholderen. Her vil vi sette verdien av displayegenskapen som flex og sette gapet mellom barnedivene som “10px”:

.foreldre
Display: Flex;
Gap: 10px;

Sett etter det bredde, høyde og bakgrunnsfarge på diven som “650px”,“200px”, Og “RGB (0, 255, 42)”, Henholdsvis:

.barn
Bredde: 650px;
Høyde: 200px;
Bakgrunn: RGB (0, 255, 42);

Utfallet av den gitte koden er gitt nedenfor:

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

CSS Float -egenskapen spesifiserer den flytende retningen til et element. Mer spesifikt kan denne egenskapen brukes til å plassere to divs side om side i CSS.

Syntaks

Syntaksen til float -egenskapen er:

Float: Ingen | Venstre | Høyre

Her er beskrivelsen for de ovennevnte verdiene:

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

La oss flytte til eksemplet med å plassere div side om side.

Eksempel

Nå vil vi lage to divs inne i taggen og tilordne klassenavn som "Div1”Og“Div2”:

Bruk deretter “.Div1”Og“.Div2”For å få tilgang til containerne som er lagt til i HTML -delen. Vi vil bruke begge divene i samme klasse fordi egenskapene og verdiene som vi skal tilordne til begge er de samme.

Deretter tildeler vi verdien av float -egenskapen som "venstre”Og sett bredden og høyden på divet som“50%”Og“40%”. Vi bruker også egenskapen til størrelse og setter verdien som "grenseboks”. Sett dessuten bakgrunnsfargen på divet som "RGB (7, 255, 222)”Og angi verdiene til grenseeiendommer som“3px”,“fast”, Og“RGB (255, 0, 255)”:

.Div1, .div2
FLOAT: Venstre;
Bredde: 50%;
Høyde: 40%;
Bokstørrelse: Border-Box;
Bakgrunn: RGB (7, 255, 222);
Grense: 3px solid RGB (255, 0, 255);

Merk: Du kan plassere to divs side om side uten å bruke eiendommer i boksen og grense eiendom ved å sette de forskjellige bakgrunnsfargene på divene.

Når du har implementert koden ovenfor, kjører du HTML -filen og ser resultatet:

Merk: For å skape et gap mellom to divs, må du først opprette en annen div og deretter sette marginen til diven deretter.

Konklusjon

DIVS kan plasseres side om side ved å bruke tre forskjellige metoder for CSS, som er "Flex”Og“Nett”Verdier for visningsegenskapen og“flyte”Eiendom. Hver av metodene fungerer effektivt; Du kan imidlertid bruke noen av dem i henhold til våre krav. I denne guiden har vi diskutert tre metoder for å plassere div side om side ved hjelp av CSS og gitt relaterte eksempler.