Ta članek prikazuje pravilno poravnavo div s praktičnimi primeri uporabe CSS.
- Kako pravilno poravnati Div z uporabo CSS?
- Uporaba lastnosti 'float'.
- Uporaba 'prave' lastnine
- Uporaba Flex Layout
- Uporaba postavitve mreže
Kako pravilno poravnati Div z uporabo CSS?
Razvijalec lahko pravilno poravna vsak element div ali sliko na način, ki naredi spletno stran bolj privlačno. Zaradi njihove velike prilagodljivosti je mogoče elemente div uporabiti na več načinov na spletni strani, kot je definiranje odsekov strani, ustvarjanje stolpcev in ovijanje nizov povezane vsebine.
Sledite spodnjim metodam za desno poravnavo diva:
1. način: Uporaba lastnosti 'float'.
V datoteki HTML ustvarite div in mu dodelite razred » poravnaj na desno ”. Ta razred in div se uporabljata v tem članku.
< div razred = 'poravnaj na desno' >
< str > To je nekaj vsebine. < / str >
< / div >
Zdaj izberite ta razred div ' poravnaj na desno ” in dodelite lastnosti CSS. Te lastnosti se uporabljajo za boljšo vizualizacijo:
.poravnaj-desno {
lebdi: desno;
oblazinjenje: 10px;
ozadje- barva : vroče roza;
}
V zgornji kodi je » lebdi ” lastnost je nastavljena na desno. Lebdi ali premakne div v pravo smer na spletni strani. Lastnosti oblazinjenja in barve ozadja so nastavljene na ' 10 slikovnih pik « in » hotpink « oz.
Po sestavljanju zgornjega delčka kode je spletna stran videti takole:
Zgornji rezultat potrjuje, da se div premika v pravo smer.
2. način: Uporaba 'prave' lastnosti
V CSS izberite razred div in nastavite » prav ” na 0. Zagotavlja, da je oddaljenost izbranega diva od desne strani enaka nič. Nato nastavite » položaj » lastnost za « absolutno ”, da določite položaj diva. Na koncu uporabite nekaj lastnosti sloga za boljšo vizualizacijo:
.poravnaj-desno{
prav: 0 ;
položaj: absolutno;
oblazinjenje: 10px;
ozadje- barva : srednje vijolična;
}
Po izvedbi kode je spletna stran videti takole:
Izhod pokaže, da je div zdaj poravnan desno.
3. način: Uporaba Flex Layout
Flex je najučinkovitejša metoda in ohranja postavitev med spreminjanjem velikosti okna. Div je mogoče poravnati desno s CSS ' Prilagodljiva postavitev ” lastnosti. Postavitev Flex vsebuje številne lastnosti za različne namene.
V datoteki HTML ustvarite nadrejeni div in znotraj njega ustvari dva sorodna diva. Prav tako vsakemu divu dodelite edinstven razred:
< div razred = 'poravnaj na desno' >< div razred = 'levo poravnano' >
< str > To je nekaj več vsebino .< / str >
< / div >
< div razred = 'desno poravnano' >
< h1 >Pozdrav iz Linuxhinta < / h1 >
< / div >
< / div >
Zdaj znotraj '
zaslon: flex;
utemelji- vsebino : presledek med;
}
.desno poravnano {
samoporavnaj: upogni konec;
oblazinjenje: 10px;
ozadje- barva : srednje vijolična;
}
V zgornji kodi je
- Dodeli ' flex « in vrednosti »space-between« za » zaslon « in » justify-content ” lastnosti. Zaradi teh lastnosti je div fleksibilen in postavi enak razmik med podrejene dive.
- ' poravnati se Lastnost je nastavljena na flex-end «, kar povzroči, da se poravna na desno stran vsebnika.
Po izvedbi zgornje kode je spletna stran videti takole:
Izhod pokaže, da je div poravnan desno z uporabo fleksibilne postavitve.
4. način: Uporaba mrežne postavitve
Mrežno postavitev lahko uporabite tudi za desno poravnavo div. Struktura kode HTML ostaja enaka:
.poravnaj-desno {prikaz: mreža;
grid-template-columns: ponovite ( 2 , 1fr ) ;
}
.desno poravnano {
mreža-stolpec- začetek : 2 ;
oblazinjenje: 10px;
ozadje- barva : zelenomodra;
}
Opis kode je podan spodaj:
- Najprej izberite nadrejeni razred div ' .poravnaj-desno ' in nastavite ' zaslon » lastnost za « mreža ”.
- Nato ustvarite dva stolpca enake velikosti z uporabo ' mreža-predloga-stolpci ' nastavljena ' ponovi (2, 1fr) ”.
- Na koncu izberite podrejeni razred div ' .desno poravnano « in nastavite » mreža-stolpec-začetek ” na 2. Ta lastnost začne element iz drugega stolpca, tj. z desne strani.
Po izvedbi zgornje kode je spletna stran videti takole:
Izhod ponazarja, da je div zdaj poravnan desno z uporabo ' mreža ” lastnosti postavitve.
Zaključek
Če želite div poravnati v pravo smer, uporabite » lebdi ”, “ prav ”, “ prilagodljiva postavitev «, in » postavitev mreže ” lastnosti. ' lebdi ” lastnost nastavi na desno z dodelitvijo vrednosti “ 0px ”. Za ' flex ', nastavite zaslon na upogljivost in uporabite ' poravnati se » lastnost za « flex-end ”. Z lastnostjo grid naredite dva enako velika stolpca in naj se podrejeni div začne z drugim stolpcem.