Maison > interface Web > tutoriel CSS > Comment aligner des divisions horizontalement dans un conteneur à dimensions fixes ?

Comment aligner des divisions horizontalement dans un conteneur à dimensions fixes ?

Barbara Streisand
Libérer: 2024-11-10 09:57:02
original
216 Les gens l'ont consulté

How to Align Divs Horizontally Within a Container with Fixed Dimensions?

Flotter des divs horizontalement dans un conteneur aux dimensions fixes

Question :

Je dois aligner les divs horizontalement dans un conteneur , mais je suis confronté à des problèmes où les éléments débordés passent à la ligne suivante malgré la hauteur limitée du parent. Obtenir la mise en page souhaitée via des éléments en ligne n'est pas une option.

Solution :

Pour aligner les div horizontalement et éviter le problème de débordement, pensez à ajouter un div interne dans le conteneur. qui a une largeur suffisante pour accueillir tous les divs flottants. Voici un exemple de code pour cette solution :

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}
Copier après la connexion
<div>
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!

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal