Aquest article demostra l'alineació correcta d'un div amb exemples pràctics amb CSS.
- Com alinear correctament un div amb CSS?
- Utilitzant la propietat 'float'.
- Utilitzant la propietat 'correcta'.
- Ús de Flex Layout
- Utilitzant el disseny de quadrícula
Com alinear correctament un div amb CSS?
El desenvolupador pot alinear correctament cada element o imatge div de manera que el lloc web sigui més atractiu. A causa de la seva gran flexibilitat, els elements div es poden utilitzar de diverses maneres a la pàgina web, com ara definir seccions de pàgina, crear columnes i embolicar conjunts de contingut relacionat.
Seguiu els mètodes següents per alinear el div a la dreta:
Mètode 1: Ús de la propietat 'float'.
Al fitxer HTML, creeu un div i assigneu-li una classe de ' alinear a la dreta ”. Aquesta classe i div s'utilitzen al llarg d'aquest article.
< div classe = 'alinear a la dreta' >
< pàg > Aquest és un contingut. < / pàg >
< / div >
Ara, seleccioneu aquesta classe div ' alinear a la dreta ” i assigneu les propietats CSS. Aquestes propietats s'utilitzen per a una millor visualització:
.alinear-a-dreta {
flotar: dret;
farciment: 10px;
fons- color : rosa calent;
}
En el codi anterior, el ' flotar ” la propietat es troba a la dreta. Flota o mou el div en la direcció correcta a la pàgina web. Les propietats de farciment i de color de fons s'estableixen a “ 10 píxels ' i ' rosa calent ” respectivament.
Després de compilar el fragment de codi anterior, la pàgina web té aquest aspecte:
La sortida anterior confirma que el div es mou en la direcció correcta.
Mètode 2: Ús de la propietat 'correcta'.
Al CSS, seleccioneu la classe div i configureu el ' dret ” a 0. Assegura que la distància del div seleccionat des del costat dret és igual a zero. A continuació, configureu el ' posició 'propietat a' absolut ” per fixar la posició div. Al final, apliqueu algunes propietats d'estil per a una millor visualització:
.alinear-a-dreta{
dret: 0 ;
posició: absoluta;
farciment: 10px;
fons- color : morat mitjà;
}
Després d'executar el codi, la pàgina web té aquest aspecte:
La sortida mostra que el div ara està alineat a la dreta.
Mètode 3: Ús de Flex Layout
Flex és el mètode més eficient i manté el disseny durant el canvi de mida de la finestra. El div es pot alinear a la dreta utilitzant CSS ' Disseny flexible ” propietats. El disseny Flex conté moltes propietats per a diferents propòsits.
Al fitxer HTML creeu un div pare i dins d'ell crea dos divs germans. A més, assigneu a cada div una classe única:
< div classe = 'alinear a la dreta' >< div classe = 'alineat a l'esquerra' >
< pàg > Això és més contingut .< / pàg >
< / div >
< div classe = 'alineat a la dreta' >
< h1 >Hola des de Linuxhint < / h1 >
< / div >
< / div >
Ara dins del '
pantalla: flex;
justificar- contingut : espai-entre;
}
.alineat a la dreta {
align-self: flex-end;
farciment: 10px;
fons- color : morat mitjà;
}
En el codi anterior,
- Assigna ' flexionar ' i 'espai entre' als valors ' visualització ' i ' justificar-contingut ” propietats, respectivament. Aquestes propietats fan que el div sigui flexible i posen un espai igual entre els divs secundaris.
- El ' alinear-se La propietat s'estableix en ' extrem flexible ”, que fa que s'alinei al costat dret del contenidor.
Després d'executar el codi anterior, la pàgina web té aquest aspecte:
La sortida mostra que el div està alineat a la dreta mitjançant el disseny flexible.
Mètode 4: Ús del disseny de quadrícula
El disseny de la quadrícula també es pot utilitzar per alinear a la dreta el div. L'estructura del codi HTML segueix sent la mateixa:
.alinear-a-dreta {visualització: quadrícula;
grid-template-columns: repetir ( 2 , 1fr ) ;
}
.alineat a la dreta {
quadrícula-columna- començar : 2 ;
farciment: 10px;
fons- color : verd blavós;
}
La descripció del codi es dóna a continuació:
- Primer, seleccioneu la classe div principal ' .alinear-a-dreta ' i estableix el seu ' visualització 'propietat a' graella ”.
- A continuació, creeu dues columnes amb la mateixa mida utilitzant “ columnes-plantilla-quadrícula ' ajustat a ' repetir (2, 1fr) ”.
- Al final, seleccioneu la classe div infantil ' .alineat a la dreta ' i configureu el ' graella-columna-inici ” propietat a 2. Aquesta propietat comença l'element des de la segona columna, és a dir, des del costat dret.
Després d'executar el codi anterior, la pàgina web té aquest aspecte:
La sortida il·lustra que el div està ara alineat a la dreta utilitzant el ' graella ” propietats de disseny.
Conclusió
Per alinear el div en la direcció correcta, utilitzeu ' flotar ”, “ dret ”, “ disseny flexible ”, i “ disposició de la quadrícula ” propietats. El ' flotar ' la propietat s'estableix a la dreta assignant el valor ' 0px ”. Per al ' flexionar ', configureu la pantalla perquè es flexioni i utilitzeu el ' alinear-se 'propietat a' extrem flexible ”. Utilitzant la propietat grid, feu dues columnes de la mateixa mida i feu que el div fill comenci des de la segona columna.