Comme nous travaillons avec des conteneurs et leurs enfants positionnés de manière absolue ou relative, nous pouvons rencontrer des difficultés pour déterminer la hauteur du conteneur tout en garantissant que le les enfants y restent.
Considérez le HTML et le CSS suivants code:
<section>
article { position: relative; } .one { position: absolute; top: 10px; left: 10px; background: red; width: 30px; height: 30px; } .two { position: absolute; top: 10px; right: 10px; background: blue; width: 30px; height: 30px; }
L'objectif est de faire en sorte que le texte "barre" apparaisse entre les quatre carrés, et non derrière eux. Cependant, en raison du positionnement absolu des carrés, la hauteur du conteneur ne peut pas être définie en fonction des dimensions de ses enfants.
Mise à jour 2022 :
Les technologies de mise en page CSS modernes comme Flex ou Grid offrent des solutions plus élégantes. Il est recommandé d'explorer ces options pour un meilleur support et une meilleure flexibilité.
Réponse originale :
Avec du CSS pur, il n'est pas possible de définir la taille du parent tout en conservant une valeur absolue positionnement pour ses enfants.
Alternative Approches :
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!