Tämä artikkeli osoittaa div:n oikean kohdistuksen käytännön esimerkein CSS:n avulla.
- Kuinka kohdistaa divisioon oikein CSS:n avulla?
- 'Float'-ominaisuuden käyttäminen
- 'Oikean' ominaisuuden käyttäminen
- Flex Layoutin käyttäminen
- Ruudukkoasettelun käyttäminen
Kuinka kohdistaa divisioon oikein CSS:n avulla?
Kehittäjä voi kohdistaa jokaisen div-elementin tai kuvan oikealle tavalla, joka tekee verkkosivustosta houkuttelevamman. Suuren joustavuutensa ansiosta div-elementtejä voidaan hyödyntää verkkosivulla useilla tavoilla, kuten sivuosien määrittämisessä, sarakkeiden luomisessa ja niihin liittyvän sisällön rivityssarjoissa.
Tasaa div oikealle seuraavien menetelmien mukaisesti:
Tapa 1: 'kelluva'-ominaisuuden käyttäminen
Luo HTML-tiedostoon div ja määritä sille luokka ' tasaa oikealle ”. Tätä luokkaa ja diviä käytetään koko tämän artikkelin ajan.
< div luokkaa = 'tasaa oikealle' >
< s > Tämä on jonkin verran sisältöä. < / s >
< / div >
Valitse nyt se div-luokka ' tasaa oikealle ” ja määritä CSS-ominaisuudet. Näitä ominaisuuksia hyödynnetään parempaan visualisointiin:
.kohdista oikealle {
kellua: oikea;
täyte: 10px;
tausta- väri : kuuma pinkki;
}
Yllä olevassa koodissa ' kellua ” omaisuus on asetettu oikealle. Se kelluu tai siirtää div-merkkiä oikeaan suuntaan verkkosivulla. Täyte- ja taustaväriominaisuudet on asetettu arvoon ' 10px ' ja ' kuuma pinkki ' vastaavasti.
Yllä olevan koodinpätkän kääntämisen jälkeen verkkosivu näyttää tältä:
Yllä oleva tulos vahvistaa, että div liikkuu oikeaan suuntaan.
Tapa 2: Käytä 'oikeaa' ominaisuutta
Valitse CSS:ssä div-luokka ja aseta ' oikein ”-ominaisuuden arvoksi 0. Se varmistaa, että valitun div:n etäisyys oikealta on nolla. Aseta sitten ' asema 'omaisuus' ehdoton ', jotta div-sijainti kiinteä. Käytä lopuksi joitain tyyliominaisuuksia paremman visualisoinnin saavuttamiseksi:
.kohdista oikealle{
oikein: 0 ;
sijainti: absoluuttinen;
täyte: 10px;
tausta- väri : keskivioletti;
}
Koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos näyttää, että div on nyt tasattu oikealle.
Tapa 3: Flex Layoutin käyttäminen
Flex on tehokkain tapa, ja se säilyttää asettelun ikkunan kokoa muuttaessa. Div voidaan tasata oikealle CSS:llä ' Joustava asettelu ” ominaisuuksia. Flex-asettelu sisältää monia ominaisuuksia eri tarkoituksiin.
Luo HTML-tiedostoon emo-div ja sen sisään kaksi sisarus-div:tä. Määritä myös jokaiselle diville yksilöllinen luokka:
< div luokkaa = 'tasaa oikealle' >< div luokkaa = 'vasemmalle tasattuna' >
< s > Tämä on vähän enemmän sisältö .< / s >
< / div >
< div luokkaa = 'oikealle kohdistettu' >
< h1 >Hei Linuxhintistä < / h1 >
< / div >
< / div >
Nyt sisällä '
näyttö: flex;
perustella- sisältö : välilyönti;
}
.oikealle tasattu {
kohdista-itse: flex-end;
täyte: 10px;
tausta- väri : keskivioletti;
}
Yllä olevassa koodissa
- Määritä ' flex ' ja 'välilyönti' arvot arvoihin ' näyttö ' ja ' perustele-sisältö ”-ominaisuuksia. Nämä ominaisuudet tekevät div:stä flexin ja asettavat yhtäläiset välit alidiv:ien väliin.
- ' kohdistaa itsensä ' ominaisuus on asetettu arvoon ' joustava pää ”, jolloin se kohdistuu säiliön oikealle puolelle.
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos näyttää, että div on kohdistettu oikeaan käyttämällä flex-asettelua.
Tapa 4: Ruudukkoasettelun käyttäminen
Ruudukkoasettelua voidaan käyttää myös div-kohdan kohdistamiseen oikealle. HTML-koodin rakenne pysyy samana:
.kohdista oikealle {näyttö: ruudukko;
grid-template-columns: toista ( 2 , 1fr ) ;
}
.oikealle tasattu {
ruudukko-sarake- alkaa : 2 ;
täyte: 10px;
tausta- väri : sinivihreä;
}
Koodin kuvaus on alla:
- Valitse ensin ylätason div-luokka ' .kohdista oikealle ' ja aseta sen ' näyttö 'omaisuus' ruudukko ”.
- Luo sitten kaksi samankokoista saraketta käyttämällä ' ruudukko-malli-sarakkeet ' asetettu ' toista (2, 1fr) ”.
- Valitse lopuksi lapsi div -luokka ' .oikealle tasattu ' ja aseta ' ruudukko-sarake-aloitus ”-ominaisuuden arvoksi 2. Tämä ominaisuus aloittaa elementin toisesta sarakkeesta eli oikealta puolelta.
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos osoittaa, että div on nyt kohdistettu oikeaan käyttämällä ' ruudukko ” asettelun ominaisuudet.
Johtopäätös
Kohdista div oikeaan suuntaan käyttämällä ' kellua ”, “ oikein ”, “ joustava asettelu ”, ja ” ruudukon asettelu ” ominaisuuksia. ' kellua ' ominaisuus asettaa oikealle antamalla arvon ' 0px ”. Varten ' flex '-ominaisuutta, aseta näyttö taipumaan ja käytä ' kohdistaa itsensä 'omaisuus' joustava pää ”. Tee grid-ominaisuuden avulla kaksi samankokoista saraketta ja aloita ali-div toisesta sarakkeesta.