I denne artikel vil vi diskutere hver af de nævnte tilgange én efter én og give et passende eksempel på hver metode.
Så lad os komme i gang!
Metode 1: Placer to Div'er side om side i CSS ved hjælp af gitter
CSS ' gitter ” layout giver brugeren mulighed for at placere to eller flere to divs side om side. Grundlæggende er gitteret en værdi af visningsegenskaben, der bruges til at skabe et layout bestående af rækker og kolonner.
Syntaks
Syntaks for visningsegenskaben med gitterlayout er angivet nedenfor:
display: gitter
Lad os nu se et eksempel relateret til at placere to div'er side om side i CSS ved hjælp af gitterlayoutet.
Eksempel
Her vil vi oprette to underordnede div'er inde i den overordnede div, med klassenavnene som ' forælder ', ' barn ' og ' barn ”:
< div klasse = 'forælder' >< div klasse = 'barn' >< / div >
< div klasse = 'barn' >< / div >
< / div >
Næste i CSS-sektionen skal du bruge ' .forælder ' for at få adgang til den overordnede div og indstille værdien af visningsegenskaben som ' gitter ”. Indstil derefter brøken ved hjælp af ' gitter-skabelon-kolonner ” egenskab for at skabe plads til søjler. I vores tilfælde vil vi sætte brøker som ' 1fr ' og ' 1fr ”, hvilket betyder at begge div'er har fået lige stor plads. Desuden vil vi indstille afstanden mellem to kolonner ved hjælp af kolonne-gap egenskaben og indstille dens værdi som ' 25 px ”.
CSS:
.forælder {Skærm : gitter ;
gitter-skabelon-kolonner : 1 fr 1 fr ;
kolonne-gab : 25 px ;
}
I næste trin bruger vi ' .barn ' for at få adgang til både underordnede div og indstille højden på divs som ' 250 px ' og indstil baggrundsfarven som ' rgb(253, 5, 109) ”:
.barn {højde : 250 px ;
baggrund : rgb ( 253 , 5 , 109 ) ;
}
Dette vil vise følgende resultat:
Lad os gå til en anden metode til at placere div side om side
Metode 2: Placer to Divs side om side i CSS ved hjælp af flex
Det ' bøje ” er værdien af egenskaben display, der gør det muligt at placere to div'er side om side. Denne egenskab bruges til at indstille en fleksibel længde for den fleksible vare. Det krymper eller vokser flex-emnet, så det passer i dets beholder.
Syntaks
Syntaksen for display-egenskaber med flex er angivet nedenfor:
display: flex;Lad os gå til eksemplet for at forstå det angivne koncept.
Eksempel
Vi vil overveje den samme HTML-fil og anvende ' bøje ” til forældrebeholderen. Her vil vi indstille værdien af display-egenskaben som flex og indstille afstanden mellem underordnede divs som ' 10px ”:
.forælder {Skærm : bøje ;
hul : 10px ;
}
Indstil derefter bredden, højden og baggrundsfarven for div'en som ' 650 px ', ' 200 px ', og “rgb(0, 255, 42) ', henholdsvis:
.barn {bredde : 650 px ;
højde : 200 px ;
baggrund : rgb ( 0 , 255 , 42 ) ;
}
Resultatet af den givne kode er angivet nedenfor:
Metode 3: Placer to Divs side om side i CSS ved hjælp af float
CSS-float-egenskaben angiver den flydende retning af et element. Mere specifikt kan denne egenskab bruges til at placere to div'er side om side i CSS.
Syntaks
Syntaksen for float-egenskaben er:
flyde: ingen|venstre|højreHer er beskrivelsen af de ovenfor givne værdier:
- ingen: Det bruges til at begrænse flydende.
- venstre: Den bruges til at flyde elementer på venstre side.
- ret: Det bruges til at flyde elementer på højre side.
Lad os gå til eksemplet med at placere div side om side.
Eksempel
Nu vil vi oprette to div'er inde i
-tagget og tildele klassenavnet som ' div1 ' og ' div2 ”: < legeme >< div klasse = 'div1' >< / div >
< div klasse = 'div2' >< / div >
< / legeme >
Brug derefter ' .div1 ' og ' .div2 ” for at få adgang til de containere, der er tilføjet i HTML-sektionen. Vi vil bruge begge div'er i samme klasse, fordi egenskaberne og værdierne, som vi vil tildele til begge, er de samme.
Dernæst tildeler vi værdien af float-egenskaben som ' venstre ' og indstil bredden og højden af div'en som ' halvtreds% ' og ' 40 % ”. Vi bruger også egenskaben box-sizing og indstiller dens værdi som ' grænse-kasse ”. Indstil desuden baggrundsfarven på div'en som ' rgb(7, 255, 222) ' og indstil værdierne for grænseegenskab som ' 3 px ', ' solid ', og ' rgb(255; 0; 255) ”:
.div1 , .div2 {flyde : venstre ;
bredde : halvtreds% ;
højde : 40 % ;
kassestørrelse : grænse-kasse ;
baggrund : rgb ( 7 , 255 , 222 ) ;
grænse : 3 px solid rgb ( 255 , 0 , 255 ) ;
}
Bemærk: Du kan placere to div'er side om side uden at bruge boksstørrelsesegenskaber og grænseegenskaber ved at indstille de forskellige baggrundsfarver for div'erne.
Når du implementerer ovenstående kode, udfører HTML-filen og ser resultatet:
Bemærk: For at skabe et mellemrum mellem to div'er skal du først oprette en anden div og derefter indstille marginen på div'en i overensstemmelse hermed.
Konklusion
Divs kan placeres side om side ved at bruge tre forskellige metoder til CSS, som er ' bøje ' og ' gitter '-værdier for visningsegenskaben og ' flyde ” ejendom. Hver af metoderne virker effektivt; du kan dog bruge enhver af dem i henhold til vores krav. I denne guide har vi diskuteret tre metoder til at placere div side om side ved hjælp af CSS og givet relaterede eksempler.