Comment aligner à droite les éléments d'une division tout en gardant une troisième division alignée à gauche ?

Alignement des éléments Div à l'aide de la marge et des flotteurs

Énoncé du problème :

Un utilisateur vise à aligner à droite deux éléments div (un bouton et un formulaire) tout en gardant un troisième div (un canevas) aligné à gauche. Cependant, si vous tentez d'aligner les deux premiers éléments, ils apparaissent côte à côte au lieu de l'un après l'autre.

Solution utilisant les marges et les flottants :

Le le code fourni utilise le flottement pour aligner le bouton et le formulaire. Bien que le flottement puisse fonctionner en général, il est connu qu'il y a des problèmes avec IE 6 et 7.

Pour résoudre ce problème, envisagez d'utiliser des marges au lieu de flotter pour le div interne contenant le bouton et le formulaire. Voici le CSS révisé :

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

Explication :

• margin-left: auto: Cela aligne le div interne sur le bord droit de son div contenant.
• margin-right: 0: Cela garantit que le div n'occupe aucun espace sur le côté droit, permettant au bouton d'occuper l'espace restant.

L'utilisation des marges offre un comportement plus cohérent dans les différents navigateurs, y compris IE, garantissant que les éléments sont alignés 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!