Maison > interface Web > tutoriel CSS > Pourquoi mes divs ne s'alignent-ils pas horizontalement et comment puis-je y remédier ?

Pourquoi mes divs ne s'alignent-ils pas horizontalement et comment puis-je y remédier ?

Susan Sarandon
Libérer: 2024-11-03 04:01:02
original
1068 Les gens l'ont consulté

Why are my divs not aligning horizontally and how can I fix it?

Alignement horizontal des divs

Pour une raison quelconque, les divs ne sont pas toujours alignés horizontalement dans leurs divs de conteneur, laissant un espace visuellement indésirable. Ce problème peut survenir lors de l’utilisation de float pour positionner les div enfants. Considérez ce qui suit :

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}

.block {
  width: 100px;
  float: left;
}</code>
Copier après la connexion

Ce code vise à positionner les div enfants horizontalement dans la ligne div. Cependant, il y aura parfois une ligne avec un seul div enfant, ce qui entraînera un écart.

Pour remédier à cela, une approche alternative consiste à utiliser display: inline-block au lieu de float. Cela vous permet d'obtenir un alignement horizontal tout en conservant les propriétés de type bloc, notamment la largeur et la hauteur. Voici le CSS modifié :

<code class="css">.block {
  width: 100px;
  display: inline-block;
}</code>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal