Denne artikkelen demonstrerer riktig justering av en div med praktiske eksempler ved bruk av CSS.
- Hvordan høyrejustere en Div ved hjelp av CSS?
- Bruke 'flyte'-egenskapen
- Bruk av 'riktig' eiendom
- Bruker Flex Layout
- Bruke Grid Layout
Hvordan høyrejustere en Div ved hjelp av CSS?
Utvikleren kan høyrejustere hvert div-element eller bilde på en måte som gjør nettstedet mer tiltalende. På grunn av deres høye fleksibilitet, kan div-elementer brukes på flere måter på nettsiden, for eksempel ved å definere sideseksjoner, lage kolonner og pakke inn sett med relatert innhold.
Følg metodene nedenfor for å høyrejustere div:
Metode 1: Bruk av 'flyte'-egenskapen
Opprett en div i HTML-filen og tilordne den en klasse med ' juster mot høyre '. Denne klassen og div brukes gjennom hele denne artikkelen.
< div klasse = 'juster-til-høyre' >
< s > Dette er noe innhold. < / s >
< / div >
Velg nå den div-klassen ' juster mot høyre ' og tilordne CSS-egenskapene. Disse egenskapene brukes for bedre visualisering:
.align-to-right {
flyte: høyre;
polstring: 10px;
bakgrunn- farge : hotpink;
}
I koden ovenfor, ' flyte ” egenskapen er satt til høyre. Den flyter eller flytter div i riktig retning på nettsiden. Utfyllings- og bakgrunnsfargeegenskapene er satt til ' 10 piksler ' og ' hotpink 'henholdsvis.
Etter å ha kompilert kodebiten ovenfor, ser nettsiden slik ut:
Utgangen ovenfor bekrefter at div beveger seg i riktig retning.
Metode 2: Bruk av 'riktig' egenskap
I CSS, velg div-klassen og sett ' Ikke sant ” egenskap til 0. Den sikrer at avstanden til den valgte div fra høyre side er lik null. Sett deretter ' posisjon ' eiendom til ' absolutt ” for å gjøre div-posisjonen fast. Til slutt, bruk noen stylingsegenskaper for bedre visualisering:
.align-to-right{
Ikke sant: 0 ;
posisjon: absolutt;
polstring: 10px;
bakgrunn- farge : middels lilla;
}
Etter å ha kjørt koden ser nettsiden slik ut:
Utgangen viser at div nå er høyrejustert.
Metode 3: Bruke Flex Layout
Flex er den mest effektive metoden, og den opprettholder layouten under endring av størrelsen på vinduet. div kan høyrejusteres ved hjelp av CSS ' Flex Layout ' egenskaper. Flex-oppsettet inneholder mange egenskaper for ulike formål.
Lag en overordnet div i HTML-filen, og inni den lager den to søsken-diver. Tildel også hver div en unik klasse:
< div klasse = 'juster-til-høyre' >< div klasse = 'venstrejustert' >
< s > Dette er noe mer innhold .< / s >
< / div >
< div klasse = 'høyrejustert' >
< h1 >Hei fra Linuxhint < / h1 >
< / div >
< / div >
Nå inne i '
display: flex;
rettferdiggjøre- innhold : mellomrom;
}
.høyrejustert {
align-self: flex-end;
polstring: 10px;
bakgrunn- farge : middels lilla;
}
I koden ovenfor,
- Tilordne ' bøye seg ' og 'mellomrom'-verdier til ' vise ' og ' rettferdiggjøre-innhold ” eiendommer, henholdsvis. Disse egenskapene gjør div til en flex og setter lik avstand mellom barnedivene.
- « innrette seg selv ' egenskapen er satt til ' flex-ende ”, noe som får den til å justere til høyre side av beholderen.
Etter å ha utført koden ovenfor ser nettsiden slik ut:
Utgangen viser at div-en er rettjustert ved å bruke flex-oppsettet.
Metode 4: Bruke rutenettoppsett
Rutenettoppsettet kan også brukes til å høyrejustere div. HTML-kodestrukturen forblir den samme:
.align-to-right {display: rutenett;
rutenett-mal-kolonner: gjenta ( 2 , 1 fr ) ;
}
.høyrejustert {
rutenett-kolonne- start : 2 ;
polstring: 10px;
bakgrunn- farge : blågrønn;
}
Beskrivelsen av koden er gitt nedenfor:
- Velg først den overordnede div-klassen ' .align-to-right ' og sett dens ' vise ' eiendom til ' Nett '.
- Deretter oppretter du to kolonner med samme størrelse ved å bruke ' rutenett-mal-kolonner ' satt til ' gjenta (2, 1fr) '.
- Til slutt velger du barnediv-klassen ' .høyrejustert ' og still inn ' rutenett-kolonne-start ” egenskap til 2. Denne egenskapen starter elementet fra den andre kolonnen, dvs. fra høyre side.
Etter å ha utført koden ovenfor, ser nettsiden slik ut:
Utgangen illustrerer at div nå er høyrejustert ved å bruke ' Nett ' layoutegenskaper.
Konklusjon
For å justere div i riktig retning, bruk ' flyte ', ' Ikke sant ', ' flex layout ', og ' rutenettoppsett ' egenskaper. « flyte ' egenskapen setter til høyre ved å tildele verdien ' 0px '. For ' bøye seg '-egenskapen, sett skjermen til å bøye seg og bruk ' innrette seg selv ' eiendom til ' flex-ende '. Bruk grid-egenskapen, lag to like store kolonner og få underordnet div til å starte fra den andre kolonnen.