Le div à l'intérieur d'un autre div image et code ci-dessous. Parce qu'il y aura du texte et des images de la div parente. Et la div rouge sera le dernier élément de la div parente.
<div style="width: 200px; height: 150px; border: 1px solid black;">
<div style="width: 100%; height: 50px; border: 1px solid red;">
</div>
</div>C'est une façon
<div style="position: relative;
width: 200px;
height: 150px;
border: 1px solid black;">
<div style="position: absolute;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid red;">
</div>
</div>Mais comme la division intérieure est positionnée de manière absolue, vous devrez toujours vous préoccuper du fait que le contenu de la division extérieure puisse la recouvrir (et vous devrez toujours définir des hauteurs fixes).
Si vous pouvez le faire, il est préférable de faire de cette div interne le dernier objet DOM de votre div externe et de la définir sur "clear : both".
Merci pour votre explication et pour IE Hack (si je ne me trompe pas, vous avez ajouté **width : 100% pour IE Hack).
J'ai essayé de mettre en gras les sections que j'ai modifiées, mais le Markdown ne s'applique pas à l'intérieur des blocs de code :-P
Oui, cela fonctionne mais le positionnement absolu rompt la "disposition naturelle". La hauteur de la division interne ne sera pas incluse dans la hauteur du parent et, comme la division externe devient plus étroite, vous risquez de voir un chevauchement avec d'autres éléments de la division externe.
Il se peut que vous ne souhaitiez pas un positionnement absolu parce qu'il rompt le reflux : dans certaines circonstances, une meilleure solution consiste à faire en sorte que l'élément grand-parent display:table; et l'élément parent display:table-cell;vertical-align:bottom; . Après avoir fait cela, vous devriez être en mesure de donner aux éléments enfants display:inline-block; et ils s'écouleront automatiquement vers le bas du parent.
Note : Ce n'est en aucun cas la meilleure façon de procéder !
Situation : J'ai dû faire la même chose mais je n'ai pas pu ajouter de divs supplémentaires, donc j'étais coincé avec ce que j'avais et plutôt que de supprimer innerHTML et d'en créer un autre via javascript presque comme 2 rendus, j'avais besoin d'avoir le contenu en bas (barre animée).
Solution : Étant donné que j'étais fatigué à ce moment-là, il semble normal de penser à une telle méthode, mais je savais que j'avais un élément DOM parent d'où partait la hauteur de la barre.
Plutôt que d'essayer de modifier davantage le javascript, j'ai utilisé un ( PAS TOUJOURS UNE BONNE IDÉE ) Réponse CSS ! :)
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);Oui, c'est correct, au lieu de positionner le DOM, j'ai mis son parent à l'envers en css.
Pour mon scénario, cela fonctionnera ! Peut-être pour d'autres aussi ! Pas de flamme :)
Ce n'est peut-être pas la meilleure façon de faire, mais c'est assez impressionnant, une approche très créative. J'ai moi-même été confronté à ce problème pendant un certain temps aujourd'hui, mes principaux points d'achoppement : pas de hauteurs définies, doit être complètement fluide (pas assez de caractères pour expliquer pourquoi display : table ne fonctionnait pas). Cette approche a permis de résoudre le problème à merveille ; les images à l'intérieur du div sont également retournées lorsque cela se produit, j'ai donc simplement utilisé la classe sur ces éléments pour les retourner. Tout se passe exactement comme prévu, sans hauteur fixe. C'est un peu compliqué, mais parfois il n'y a pas de meilleure alternative. Bien joué !
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Le code de la div parent est-il logiquement placé au-dessus de la div enfant ? Les images et le texte sont-ils ajoutés dynamiquement ? Quelle est la question spécifique ?