Comment puis-je agrandir une division parent pour l'adapter à son enfant parfaitement positionné ?

Redimensionnement de la hauteur de la division parent en fonction de la division enfant en position absolue

Dans la conception Web, il est souvent nécessaire de positionner les éléments dans un conteneur parent dans d'une manière non linéaire. Ceci peut être réalisé en utilisant un positionnement absolu, qui supprime l'élément du flux normal de documents. Cependant, un problème courant survient lorsque l'on essaie d'augmenter la hauteur du div parent pour s'adapter à l'enfant en position absolue.

Problème

Considérez le HTML et le CSS suivants :

<div>

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

Dans ce scénario, child2 a une hauteur dynamique et devrait apparaître en dessous de child1. Cependant, le div parent, #parent, ne s'étend pas pour inclure la taille de child2.

Solution

Le problème se pose car les éléments en position absolue sont supprimés de le flux. Par conséquent, ils sont ignorés par d'autres éléments, ce qui conduit le div parent à ne pas prendre en compte child2 pour son calcul de taille.

Alternatives

Pour résoudre ce problème, il existe deux options principales :

• Redimensionnement manuel : Utilisez une approche non CSS, telle que JavaScript, pour repositionner le divs et ajustez la hauteur du parent de manière dynamique.
• Mise en page CSS : Utilisez une boîte flexible CSS ou une disposition en grille pour inverser l'ordre visuel des éléments. Cela permet un positionnement flexible tout en maintenant le flux des éléments.

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!