Comment puis-je aligner horizontalement deux divs sans modifier le HTML ?

Aligner les éléments horizontalement sans modifier le balisage

Supposons que vous ayez deux divs, #element1 et #element2, positionnés horizontalement à l'aide de CSS. Cependant, en raison des variations de contenu dans #element2, il ne s'aligne pas parfaitement avec #element1. Vous avez besoin d'un moyen de les aligner indépendamment des différences de contenu ou de navigateur sans modifier la structure HTML.

Solution : Utiliser l'affichage en bloc en ligne

Pour réaliser cet alignement, vous peut utiliser la propriété display: inline-block pour les deux éléments :

#element1 {
  display: inline-block;
  margin-right: 10px; /* Set padding between the elements */
}

#element2 {
  display: inline-block;
}

En définissant display: inline-block, les éléments se comporteront de la même manière que les éléments en ligne mais conserveront leurs propriétés au niveau du bloc. Cela vous permet de les positionner horizontalement tout en conservant leur largeur et leur hauteur d'origine. La propriété margin-right sur #element1 introduit l'espacement souhaité entre les éléments.

Exemple

Voici un exemple qui démontre l'alignement :

<style type="text/css">
  #element1 {
    display: inline-block;
    margin-right: 10px;
  }

  #element2 {
    display: inline-block;
  }
</style>
<div>

Cette solution aligne efficacement #element2 à côté de #element1, en conservant un remplissage cohérent quelle que soit la largeur variable de #element2.

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!