Dit artikel demonstreert de juiste uitlijning van een div met praktische voorbeelden met behulp van CSS.
- Hoe een div rechts uitlijnen met behulp van CSS?
- De eigenschap 'zweven' gebruiken
- De 'juiste' eigenschap gebruiken
- Flex-indeling gebruiken
- Rasterlay-out gebruiken
Hoe een div rechts uitlijnen met behulp van CSS?
De ontwikkelaar kan elk div-element of afbeelding rechts uitlijnen op een manier die de website aantrekkelijker maakt. Vanwege hun hoge flexibiliteit kunnen div-elementen op verschillende manieren op de webpagina worden gebruikt, zoals het definiëren van paginasecties, het maken van kolommen en het inpakken van sets met gerelateerde inhoud.
Volg de onderstaande methoden om de div rechts uit te lijnen:
Methode 1: de eigenschap 'float' gebruiken
Maak in het HTML-bestand een div en wijs deze de klasse ' uitlijnen naar rechts ”. Deze klasse en div worden in dit artikel gebruikt.
< div klas = 'rechts uitlijnen' >
< P > Dit is wat inhoud. < / P >
< / div >
Selecteer nu die div-klasse ' uitlijnen naar rechts ” en wijs de CSS-eigenschappen toe. Deze eigenschappen worden gebruikt voor een betere visualisatie:
.rechts uitlijnen {
vlotter: rechts;
opvulling: 10px;
achtergrond- kleur : felroze;
}
In de bovenstaande code, de ' vlot ” eigenschap is ingesteld aan de rechterkant. Het zweeft of verplaatst de div in de goede richting op de webpagina. De eigenschappen voor opvulling en achtergrondkleur zijn ingesteld op ' 10px ' En ' felroze respectievelijk.
Na het compileren van het bovenstaande codefragment ziet de webpagina er als volgt uit:
De bovenstaande uitvoer bevestigt dat de div in de goede richting beweegt.
Methode 2: de 'juiste' eigenschap gebruiken
Selecteer in de CSS de div-klasse en stel de ' rechts ” eigenschap op 0. Het zorgt ervoor dat de afstand van de geselecteerde div vanaf de rechterkant gelijk is aan nul. Stel vervolgens de ' positie eigendom aan “ absoluut ” om de div-positie vast te zetten. Pas uiteindelijk enkele stylingeigenschappen toe voor een betere visualisatie:
.rechts uitlijnen{
rechts: 0 ;
positie: absoluut;
opvulling: 10px;
achtergrond- kleur : middenpaars;
}
Na het uitvoeren van de code ziet de webpagina er als volgt uit:
De uitvoer laat zien dat de div nu rechts uitgelijnd is.
Methode 3: Flex Layout gebruiken
Flex is de meest efficiënte methode en het behoudt de lay-out tijdens het wijzigen van de grootte van het venster. De div kan rechts worden uitgelijnd met behulp van CSS ' Flex-indeling ' eigenschappen. De Flex-lay-out bevat veel eigenschappen voor verschillende doeleinden.
Maak in het HTML-bestand een parent-div en binnenin worden twee sibling-divs gemaakt. Wijs elke div ook een unieke klasse toe:
< div klas = 'rechts uitlijnen' >< div klas = 'Links uitgelijnd' >
< P >Dit is nog wat inhoud .< / P >
< / div >
< div klas = 'rechts uitgelijnd' >
< h1 >Hallo van Linuxhint < / h1 >
< / div >
< / div >
Nu binnen de “
weergeven: flex;
verantwoorden- inhoud : ruimte tussen;
}
.rechts uitgelijnd {
uitlijnen-zelf: flex-uiteinde;
opvulling: 10px;
achtergrond- kleur : middenpaars;
}
In de bovenstaande code,
- Toewijzen ' buigen ” en “spatie tussen” waarden naar de “ weergave ' En ' rechtvaardigen-inhoud ” eigenschappen, respectievelijk. Deze eigenschappen maken de div een flex en zorgen voor gelijke afstand tussen de onderliggende div's.
- De ' align-zelf ” eigendom is ingesteld op “ flex-einde ”, waardoor het wordt uitgelijnd met de rechterkant van de container.
Na het uitvoeren van de bovenstaande code ziet de webpagina er als volgt uit:
De uitvoer laat zien dat de div rechts is uitgelijnd met behulp van de flexibele lay-out.
Methode 4: Rasterlay-out gebruiken
De rasterlay-out kan ook worden gebruikt om de div rechts uit te lijnen. De structuur van de HTML-code blijft hetzelfde:
.rechts uitlijnen {weergave: raster;
raster-sjabloon-kolommen: herhalen ( 2 , 1fr ) ;
}
.rechts uitgelijnd {
raster-kolom- begin : 2 ;
opvulling: 10px;
achtergrond- kleur : wintertaling;
}
De beschrijving van de code wordt hieronder gegeven:
- Selecteer eerst de bovenliggende div-klasse ' .rechts uitlijnen ” en stel zijn “ weergave eigendom aan “ rooster ”.
- Maak vervolgens twee kolommen van gelijke grootte met ' raster-sjabloon-kolommen ” ingesteld op “ herhalen(2, 1fr) ”.
- Selecteer uiteindelijk de onderliggende div-klasse ' .rechts uitgelijnd ” en stel de “ grid-kolom-start ” eigenschap tot 2. Deze eigenschap begint het element vanaf de tweede kolom, d.w.z. vanaf de rechterkant.
Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:
De uitvoer illustreert dat de div nu rechts is uitgelijnd met behulp van de ' rooster ” lay-out eigenschappen.
Conclusie
Om de div in de juiste richting uit te lijnen, gebruikt u ' vlot ”, “ rechts ”, “ flexibele indeling ', En ' raster lay-out ' eigenschappen. De ' vlot ” eigenschap gaat naar rechts door de waarde toe te wijzen ' 0px ”. Voor de ' buigen ' eigenschap, stel het scherm in op flex en gebruik de ' align-zelf eigendom aan “ flex-uiteinde ”. Gebruik de eigenschap grid om twee kolommen van gelijke grootte te maken en de onderliggende div te laten beginnen vanaf de tweede kolom.