Comment faire en sorte qu'une division flotte au fond de son conteneur ?
J'ai souvent fait flotter des images et des boîtes insérées en haut d'un conteneur en utilisant float:right (ou left). Récemment, j'ai eu besoin de faire flotter une division dans le coin inférieur droit d'une autre division avec l'habillage normal du texte que l'on obtient avec float (habillage du texte au-dessus et à gauche uniquement).
Je pensais que cela devait être relativement facile, même si float n'a pas de valeur inférieure, mais je n'ai pas réussi à le faire en utilisant un certain nombre de techniques et en cherchant sur le Web, je n'ai rien trouvé d'autre que l'utilisation du positionnement absolu, mais cela ne donne pas le comportement correct d'enveloppement du texte.
J'avais pensé qu'il s'agissait d'une conception très courante, mais apparemment ce n'est pas le cas. Si personne n'a de suggestion à faire, je vais devoir diviser mon texte en boîtes séparées et aligner la division manuellement, mais c'est plutôt précaire et je ne voudrais pas avoir à le faire sur chaque page qui en a besoin.
EDIT: Juste une note pour tous ceux qui viennent ici. La question liée ci-dessus comme étant un doublon n'est en fait pas un doublon. L'obligation d'envelopper le texte autour de l'élément inséré la rend complètement différente. En fait, la réponse à la réponse la plus votée ici explique clairement pourquoi la réponse à la question liée est fausse en tant que réponse à cette question. Quoi qu'il en soit, il ne semble toujours pas y avoir de solution générale à ce problème, mais certaines des solutions publiées ici et dans la question liée peuvent fonctionner dans des cas spécifiques.
Définissez la div parent sur
position : relative, puis la div interne sur......et voilà :)
Après avoir essayé diverses techniques pendant quelques jours, je dois dire que cela semble impossible. Même en utilisant javascript (ce que je ne veux pas faire), cela ne semble pas possible.
Pour clarifier pour ceux qui n'auraient pas compris, voici ce que je recherche : dans l'édition, il est assez courant de mettre en page un encart (image, tableau, figure, etc.) de sorte que son bas soit aligné avec le bas de la dernière ligne de texte d'un bloc (ou d'une page), le texte s'écoulant autour de l'encart de manière naturelle au-dessus et à droite ou à gauche selon le côté de la page où se trouve l'encart. En html/css, il est facile d'utiliser le style float pour aligner le haut d'un encart avec le haut d'un bloc, mais à ma grande surprise, il semble impossible d'aligner le bas du texte et de l'encart, bien que ce soit une tâche de mise en page courante.
Je suppose que je vais devoir revoir les objectifs de conception de cet élément, à moins que quelqu'un n'ait une suggestion de dernière minute.
Placez la div dans une autre div et définissez le style de la div parent sur
position:relative;Puis, sur la div enfant, définissez les propriétés CSS suivantes :position:absolute ; bottom:0;