Denne artikel demonstrerer den rigtige justering af en div med praktiske eksempler ved hjælp af CSS.
- Hvordan højrejusterer man en Div ved hjælp af CSS?
- Brug af 'float'-egenskaben
- Brug af den 'rigtige' ejendom
- Brug af Flex Layout
- Brug af gitterlayout
Hvordan højrejusterer man en Div ved hjælp af CSS?
Udvikleren kan højrejustere hvert div-element eller billede på en måde, der gør hjemmesiden mere tiltalende. På grund af deres høje fleksibilitet kan div-elementer bruges på flere måder på websiden, såsom at definere sidesektioner, oprette kolonner og pakke sæt af relateret indhold.
Følg nedenstående metoder for at højrejustere div:
Metode 1: Brug af egenskaben 'float'.
I HTML-filen skal du oprette en div og tildele den en klasse af ' juster mod højre ”. Denne klasse og div bruges i hele denne artikel.
< div klasse = 'align-to-right' >
< s > Dette er noget indhold. < / s >
< / div >
Vælg nu den div klasse ' juster mod højre ” og tildel CSS-egenskaberne. Disse egenskaber bruges til bedre visualisering:
.align-to-right {
flyde: højre;
polstring: 10px;
baggrund- farve : Hot pink;
}
I ovenstående kode er ' flyde ” ejendom er sat til højre. Det flyder eller flytter div'en i den rigtige retning på websiden. Egenskaberne for polstring og baggrundsfarve er indstillet til ' 10px ' og ' Hot pink ' henholdsvis.
Efter kompilering af ovenstående kodestykke ser websiden sådan ud:
Ovenstående output bekræfter, at div'en bevæger sig i den rigtige retning.
Metode 2: Brug af den 'rigtige' egenskab
I CSS'en skal du vælge div-klassen og indstille ' højre ” egenskab til 0. Det sikrer, at afstanden af den valgte div fra højre side er lig nul. Indstil derefter ' position ' ejendom til ' absolut ” for at gøre div-positionen fast. Til sidst skal du anvende nogle stylingegenskaber for bedre visualisering:
.align-to-right{
højre: 0 ;
position: absolut;
polstring: 10px;
baggrund- farve : mellemlilla;
}
Efter udførelse af koden ser websiden sådan ud:
Udgangen viser, at div'en nu er højrejusteret.
Metode 3: Brug af Flex Layout
Flex er den mest effektive metode, og den bevarer layoutet under ændring af vinduets størrelse. div kan højrejusteres ved hjælp af CSS ' Flex layout ' ejendomme. Flex-layoutet indeholder mange egenskaber til forskellige formål.
I HTML-filen opretter du en overordnet div og inde i den opretter den to søskende div'er. Tildel også hver div en unik klasse:
< div klasse = 'align-to-right' >< div klasse = 'venstrejusteret' >
< s >Dette er noget mere indhold .< / s >
< / div >
< div klasse = 'højrejusteret' >
< h1 >Hej fra Linuxhint < / h1 >
< / div >
< / div >
Nu inde i '
display: flex;
retfærdiggøre- indhold : mellemrum-mellem;
}
.højrejusteret {
align-self: flex-ende;
polstring: 10px;
baggrund- farve : mellemlilla;
}
I ovenstående kode,
- Tildel ' bøje ' og 'mellemrum mellem' værdier til ' Skærm ' og ' retfærdiggøre-indhold ” ejendomme, hhv. Disse egenskaber gør div'en til en flex og sætter lige stor afstand mellem de underordnede div'er.
- Det ' aligne-selv ' egenskab er indstillet til ' flex-ende ”, hvilket får den til at justere til højre side af beholderen.
Efter udførelse af ovenstående kode ser websiden sådan ud:
Outputtet viser, at div'en er højrejusteret ved hjælp af flex-layoutet.
Metode 4: Brug af gitterlayout
Gitterlayoutet kan også bruges til at højrejustere div. HTML-kodestrukturen forbliver den samme:
.align-to-right {display: gitter;
gitter-skabelon-kolonner: gentag ( 2 , 1 fr ) ;
}
.højrejusteret {
gitter-kolonne- Start : 2 ;
polstring: 10px;
baggrund- farve : krikand;
}
Beskrivelsen af koden er givet nedenfor:
- Først skal du vælge den overordnede div klasse ' .align-to-right ' og indstil dens ' Skærm ' ejendom til ' gitter ”.
- Opret derefter to kolonner med samme størrelse ved at bruge ' gitter-skabelon-kolonner ' indstillet til ' gentag (2, 1fr) ”.
- Til sidst skal du vælge den underordnede div klasse ' .højrejusteret ' og indstil ' gitter-kolonne-start ” egenskab til 2. Denne egenskab starter elementet fra den anden kolonne, dvs. fra højre side.
Efter at have udført ovenstående kode, ser websiden sådan ud:
Outputtet illustrerer, at div'en nu er højrejusteret ved hjælp af ' gitter ” layoutegenskaber.
Konklusion
For at justere div'en i den rigtige retning, brug ' flyde ', ' højre ', ' flex layout ', og ' gitter layout ' ejendomme. Det ' flyde ' egenskabssæt til højre ved at tildele værdien ' 0px ”. For ' bøje egenskaben, skal du indstille skærmen til at bøje og bruge ' aligne-selv ' ejendom til ' flex-ende ”. Brug grid-egenskaben til at lave to lige store kolonner og få den underordnede div til at starte fra den anden kolonne.