- Door het gebruiken van ' rooster ”
- Door het gebruiken van ' buigen ”
- Door het gebruiken van ' vlot ”
In dit artikel zullen we elk van de genoemde benaderingen één voor één bespreken en een geschikt voorbeeld van elke methode geven.
Dus laten we beginnen!
Methode 1: Plaats twee divs naast elkaar in CSS met behulp van raster
de CSS“ rooster Met de lay-out kan de gebruiker twee of meer twee divs naast elkaar plaatsen. In principe is het raster een waarde van de weergave-eigenschap die wordt gebruikt om een lay-out te maken die bestaat uit rijen en kolommen.
Syntaxis
De syntaxis van de weergave-eigenschap met rasterlay-out wordt hieronder gegeven:
weergave: raster
Laten we nu een voorbeeld bekijken met betrekking tot het naast elkaar plaatsen van twee div's in CSS met behulp van de rasterlay-out.
Voorbeeld
Hier zullen we twee onderliggende div's maken in de bovenliggende div, met de klassenamen als ' ouder ”, “ kind ' en ' kind ”:
< div klas = 'ouder' >< div klas = 'kind' >< / div >
< div klas = 'kind' >< / div >
< / div >
Gebruik vervolgens in de CSS-sectie ' .ouder ” om toegang te krijgen tot de bovenliggende div en de waarde van de eigenschap display in te stellen als “ rooster ”. Stel vervolgens de breuk in met de ' raster-sjabloon-kolommen ” eigenschap om ruimte te creëren voor kolommen. In ons geval zullen we breuken instellen als ' 1fr ' en ' 1fr ”, wat betekent dat beide div's evenveel ruimte hebben gekregen. Verder zullen we de opening tussen twee kolommen instellen met behulp van de eigenschap column-gap en de waarde ervan instellen als ' 25px ”.
CSS:
.ouder {Scherm : rooster ;
raster-sjabloon-kolommen : 1fr 1fr ;
kolom-gap : 25px ;
}
In de volgende stap gebruiken we “ .kind ” om toegang te krijgen tot beide onderliggende div’s en de hoogte van divs in te stellen als “ 250px ' en stel de achtergrondkleur in als ' RGB(253, 5, 109) ”:
.kind {hoogte : 250px ;
achtergrond : rgb ( 253 , 5 , 109 ) ;
}
Dit geeft het volgende resultaat:
Laten we naar een andere methode gaan om div naast elkaar te plaatsen
Methode 2: Plaats twee divs naast elkaar in CSS met flex
De ' buigen ” is de waarde van de display-eigenschap waarmee twee divs naast elkaar kunnen worden geplaatst. Deze eigenschap wordt gebruikt om een flexibele lengte voor het flexibele artikel in te stellen. Het krimpt of laat het flexitem groeien zodat het in de container past.
Syntaxis
De syntaxis van display-eigenschap met flex wordt hieronder gegeven:
weergave: flexibel;Laten we naar het voorbeeld gaan om het genoemde concept te begrijpen.
Voorbeeld
We zullen hetzelfde HTML-bestand beschouwen en toepassen “ buigen ” naar de bovenliggende container. Hier stellen we de waarde van de display-eigenschap in als flex en stellen we de opening tussen de onderliggende divs in als ' 10px ”:
.ouder {Scherm : buigen ;
gat : 10px ;
}
Stel daarna de breedte, hoogte en achtergrondkleur van de div in als ' 650px ”, “ 200px ', en “rgb(0, 255, 42) ”, respectievelijk:
.kind {breedte : 650px ;
hoogte : 200px ;
achtergrond : rgb ( 0 , 255 , 42 ) ;
}
Het resultaat van de gegeven code wordt hieronder gegeven:
Methode 3: Plaats twee divs naast elkaar in CSS met float
De CSS float-eigenschap specificeert de zwevende richting van een element. Meer specifiek kan deze eigenschap worden gebruikt om twee div's naast elkaar in CSS te plaatsen.
Syntaxis
De syntaxis van de eigenschap float is:
zweven: geen|links|rechtsHier is de beschrijving voor de hierboven gegeven waarden:
- geen: Het wordt gebruikt om zweven te beperken.
- links: Het wordt gebruikt om elementen aan de linkerkant te laten zweven.
- Rechtsaf: Het wordt gebruikt om elementen aan de rechterkant te laten zweven.
Laten we naar het voorbeeld gaan van het naast elkaar plaatsen van div.
Voorbeeld
Nu gaan we twee divs maken in de
-tag en de klassenaam toewijzen als ' div1 ' en ' div2 ”: < lichaam >< div klas = 'div1' >< / div >
< div klas = 'div2' >< / div >
< / lichaam >
Gebruik dan “ .div1 ' en ' .div2 ” om toegang te krijgen tot de containers die zijn toegevoegd in de HTML-sectie. We zullen beide div's in dezelfde klasse gebruiken omdat de eigenschappen en waarden die we aan beide gaan toewijzen hetzelfde zijn.
Vervolgens wijzen we de waarde van de eigenschap float toe als ' links ” en stel de breedte en hoogte van de div in als “ vijftig% ' en ' 40% ”. We gebruiken ook de eigenschap box-sizing en stellen de waarde in als ' border-box ”. Stel bovendien de achtergrondkleur van de div in als ' RGB(7, 255, 222) ” en stel de waarden van de grenseigenschap in als “ 3px ”, “ stevig ', en ' RGB(255, 0, 255) ”:
.div1 , .div2 {vlot : links ;
breedte : vijftig% ;
hoogte : 40% ;
doosmaat : border-box ;
achtergrond : rgb ( 7 , 255 , 222 ) ;
grens : 3px stevig rgb ( 255 , 0 , 255 ) ;
}
Opmerking: U kunt twee divs naast elkaar plaatsen zonder box-sizing-eigenschap en border-eigenschap te gebruiken door de verschillende achtergrondkleuren van de divs in te stellen.
Nadat u de bovenstaande code hebt geïmplementeerd, voert u het HTML-bestand uit en ziet u het resultaat:
Opmerking: Als u een opening tussen twee div's wilt maken, maakt u eerst een andere div en stelt u vervolgens de marge van de div dienovereenkomstig in.
Conclusie
Div's kunnen naast elkaar worden geplaatst met behulp van drie verschillende CSS-methoden, de ' buigen ' en ' rooster ” waarden van de eigenschap display en de “ vlot ' eigendom. Elk van de methoden werkt efficiënt; u kunt ze echter allemaal gebruiken volgens onze vereisten. In deze handleiding hebben we drie methoden besproken om div naast elkaar te plaatsen met behulp van CSS en gerelateerde voorbeelden gegeven.