Cet article démontre le bon alignement d'un div avec des exemples pratiques utilisant CSS.
- Comment aligner à droite une div en utilisant CSS ?
- Utilisation de la propriété 'float'
- Utiliser la 'bonne' propriété
- Utilisation de la mise en page flexible
- Utilisation de la disposition en grille
Comment aligner à droite une div en utilisant CSS ?
Le développeur peut aligner à droite chaque élément div ou image de manière à rendre le site Web plus attrayant. En raison de leur grande flexibilité, les éléments div peuvent être utilisés de plusieurs manières sur la page Web, telles que la définition de sections de page, la création de colonnes et l'emballage d'ensembles de contenu connexe.
Suivez les méthodes ci-dessous pour aligner à droite la div :
Méthode 1 : Utilisation de la propriété « float »
Dans le fichier HTML, créez un div et attribuez-lui une classe de ' aligner à droite ”. Cette classe et cette div sont utilisées tout au long de cet article.
< div classe = 'aligner à droite' >
< p > C'est du contenu. < / p >
< / div >
Maintenant, sélectionnez cette classe div ' aligner à droite ” et attribuez les propriétés CSS. Ces propriétés sont utilisées pour une meilleure visualisation :
.aligner à droite {
Flotter à droite;
rembourrage : 10px ;
arrière-plan- couleur : rose vif;
}
Dans le code ci-dessus, le ' flotter ” la propriété est définie sur la droite. Il flotte ou déplace la div dans la bonne direction sur la page Web. Les propriétés padding et background-color sont définies sur ' 10 pixels ' et ' rose vif ' respectivement.
Après avoir compilé l'extrait de code ci-dessus, la page Web ressemble à ceci :
La sortie ci-dessus confirme que la div se déplace dans la bonne direction.
Méthode 2 : Utiliser la « bonne » propriété
Dans le CSS, sélectionnez la classe div et définissez le ' droite ” à 0. Cela garantit que la distance entre la div sélectionnée et le côté droit est égale à zéro. Ensuite, réglez le ' position 'propriété à' absolu ” pour fixer la position div. À la fin, appliquez quelques propriétés de style pour une meilleure visualisation :
.aligner à droite{
droite: 0 ;
position : absolue ;
rembourrage : 10px ;
arrière-plan- couleur : violet moyen;
}
Après avoir exécuté le code, la page Web ressemble à ceci :
La sortie montre que la div est maintenant alignée à droite.
Méthode 3 : Utilisation de Flex Layout
Flex est la méthode la plus efficace et conserve la disposition lors du redimensionnement de la fenêtre. La div peut être alignée à droite en utilisant CSS ' Disposition flexible ' propriétés. La mise en page Flex contient de nombreuses propriétés à des fins différentes.
Dans le fichier HTML, créez un div parent et à l'intérieur, il crée deux div frères. Attribuez également à chaque div une classe unique :
< div classe = 'aligner à droite' >< div classe = 'aligné à gauche' >
< p > C'est un peu plus contenu .< / p >
< / div >
< div classe = 'aligné à droite' >
< h1 >Bonjour de Linuxhint < / h1 >
< / div >
< / div >
Maintenant à l'intérieur du '