Acest articol demonstrează alinierea corectă a unui div cu exemple practice folosind CSS.
- Cum să aliniezi corect un div folosind CSS?
- Utilizarea proprietății „float”.
- Folosind proprietatea „corectă”.
- Folosind Flex Layout
- Utilizarea aspectului grilă
Cum să aliniezi corect un div folosind CSS?
Dezvoltatorul poate alinia corect fiecare element div sau imagine într-un mod care face site-ul mai atrăgător. Datorită flexibilității lor ridicate, elementele div pot fi utilizate în mai multe moduri pe pagina web, cum ar fi definirea secțiunilor de pagină, crearea de coloane și împachetarea seturi de conținut asociat.
Urmați metodele de mai jos pentru a alinia la dreapta div-ul:
Metoda 1: Utilizarea proprietății „float”.
În fișierul HTML, creați un div și atribuiți-i o clasă de „ aliniază-la-dreapta ”. Această clasă și div sunt folosite în acest articol.
< div clasă = 'aliniere la dreapta' >
< p > Acesta este un conținut. < / p >
< / div >
Acum, selectați acea clasă div „ aliniază-la-dreapta ” și atribuiți proprietățile CSS. Aceste proprietăți sunt utilizate pentru o mai bună vizualizare:
.aliniere-la-dreapta {
plutire: dreapta;
umplutură: 10px;
fundal- culoare : roz fierbinte;
}
În codul de mai sus, „ pluti ” proprietatea este setată la dreapta. Plutește sau mută div-ul în direcția corectă pe pagina web. Proprietățile de umplutură și culoarea de fundal sunt setate la „ 10px ' și ' roz fierbinte ” respectiv.
După compilarea fragmentului de cod de mai sus, pagina web arată astfel:
Ieșirea de mai sus confirmă că div-ul se mișcă în direcția corectă.
Metoda 2: Utilizarea proprietății „corecte”.
În CSS, selectați clasa div și setați „ dreapta ” la 0. Asigură că distanța div-ului selectat din partea dreaptă este egală cu zero. Apoi, setați „ poziţie „proprietate la „ absolut ” pentru a face poziția div fixă. La final, aplicați câteva proprietăți de stil pentru o vizualizare mai bună:
.aliniere-la-dreapta{
dreapta: 0 ;
poziție: absolută;
umplutură: 10px;
fundal- culoare : violet mediu;
}
După executarea codului, pagina web arată astfel:
Ieșirea arată că div-ul este acum aliniat la dreapta.
Metoda 3: Folosind Flex Layout
Flex este cea mai eficientă metodă și menține aspectul în timpul redimensionării ferestrei. Div-ul poate fi aliniat la dreapta folosind CSS „ Aspect flexibil ” proprietăți. Aspectul Flex conține multe proprietăți pentru diferite scopuri.
În fișierul HTML creați un div părinte și în interior creează două div-uri frați. De asemenea, atribuiți fiecărui div o clasă unică:
< div clasă = 'aliniere la dreapta' >< div clasă = 'aliniat la stânga' >
< p > Acesta este ceva mai mult conţinut .< / p >
< / div >
< div clasă = 'aliniat la dreapta' >
< h1 >Bună ziua de la Linuxhint < / h1 >
< / div >
< / div >
Acum în interiorul „
display: flex;
justifica- conţinut : spațiu-între;
}
.aliniat la dreapta {
align-self: flex-end;
umplutură: 10px;
fundal- culoare : violet mediu;
}
În codul de mai sus,
- Atribuiți „ contracta ” și valorile „spațiu-între” până la „ afişa ' și ' justifica-conținut ” proprietăți, respectiv. Aceste proprietăți fac div-ul un flex și pun o distanță egală între div-urile copil.
- „ aliniere-sine „proprietatea este setată la „ flex-end ”, ceea ce face ca acesta să se alinieze pe partea dreaptă a containerului.
După executarea codului de mai sus, pagina web arată astfel:
Ieșirea arată că div-ul este aliniat la dreapta folosind aspectul flexibil.
Metoda 4: Utilizarea aspectului grilă
Aspectul grilei poate fi, de asemenea, utilizat pentru a alinia la dreapta div. Structura codului HTML rămâne aceeași:
.aliniere-la-dreapta {afisare: grila;
grid-template-coloane: repeta ( 2 , 1fr ) ;
}
.aliniat la dreapta {
grila-coloana- start : 2 ;
umplutură: 10px;
fundal- culoare : teal;
}
Descrierea codului este prezentată mai jos:
- Mai întâi, selectați clasa div părinte „ .aliniere-la-dreapta ” și setați-i „ afişa „proprietate la „ grilă ”.
- Apoi, creați două coloane cu dimensiune egală folosind „ grilă-șablon-coloane ' setat la ' repetă (2, 1fr) ”.
- La final, selectați clasa div copil „ .aliniat la dreapta ” și setați „ grilă-coloană-start ” proprietate la 2. Această proprietate începe elementul din a doua coloană, adică din partea dreaptă.
După executarea codului de mai sus, pagina web arată astfel:
Ieșirea ilustrează că div-ul este acum aliniat la dreapta folosind „ grilă ” proprietăți de aspect.
Concluzie
Pentru a alinia div-ul în direcția corectă, utilizați „ pluti ”, “ dreapta ”, “ aspect flexibil ', și ' aspectul grilei ” proprietăți. „ pluti ” proprietatea se setează la dreapta prin atribuirea valorii “ 0px ”. Pentru ' contracta „, setați afișajul să se îndoiască și utilizați „ alinierea-sine „proprietate la „ flex-end ”. Folosind proprietatea grid, faceți două coloane de dimensiuni egale și faceți div-ul copil să înceapă de la a doua coloană.