Comment aligner les éléments DIV vers la droite tout en conservant l'empilement vertical ?

Alignement des éléments DIV à droite

Problème :

Dans un document HTML, l'alignement plusieurs éléments DIV à droite peuvent entraîner des problèmes où les éléments perdent leur empilement vertical et finissent par être disposés horizontalement.

Analyse :

Utilisation de "float: right" pour aligner les DIV peut provoquer ce problème, surtout si les DIV sont contenus dans un DIV parent. Dans de tels cas, les DIV flottants seront retirés du flux normal du document et positionnés les uns à côté des autres.

Solution :

Pour obtenir un bon alignement tout en préservant empilement vertical, une approche alternative consiste à utiliser les propriétés CSS suivantes :

margin-left: auto;

• Cette propriété ajuste automatiquement la marge gauche du DIV à poussez-le vers la droite de son conteneur parent.

margin-right: 0;

• Cette propriété élimine toute marge droite, garantissant ainsi le DIV reste au ras du bord droit de son conteneur.

Exemple :

Voici une version améliorée du code fourni utilisant ces propriétés :

<code class="css">#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}</code>

En utilisant ces propriétés, le bouton et le formulaire s'aligneront vers la droite, s'empilant verticalement l'un après l'autre comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!