Comment puis-je positionner une division en bas à droite de son conteneur tout en conservant le retour à la ligne du texte ?

Positionner une Div au fond de son conteneur : un guide complet

Flotter des éléments vers le haut des conteneurs à l'aide de float:right ou float :left est une pratique courante dans la conception de sites Web. Cependant, lorsque l'exigence est de faire flotter un div dans le coin inférieur droit de son conteneur tout en conservant le comportement naturel d'habillage du texte associé aux éléments flottants (habillage du texte au-dessus et à gauche), la tâche peut sembler ardue.

Au départ, on pourrait supposer que cette tâche devrait être simple, malgré l'absence de valeur minimale pour la propriété float. Pourtant, après avoir exploré diverses techniques et parcouru le Web, il peut sembler que la seule solution viable passe par le positionnement absolu. Cependant, cette approche sacrifie le comportement d'habillage de texte souhaité.

Contrairement à la croyance populaire, ce modèle de conception n'est pas aussi rare qu'il y paraît. Pour obtenir le résultat souhaité, nous devons utiliser une approche à deux volets :

1. Définir la position du div parent sur relative : cela établit un système de coordonnées relatif au sein du div parent.

2. Définissez les propriétés de positionnement du div interne : appliquez les propriétés CSS suivantes au div interne div:

   • position: absolue; : Ceci positionne le div de manière absolue dans son conteneur parent.
   • bottom : 0; : Ceci ancre le div au bas du div parent.

Exemple Implémentation :

<div class="parent-div">
<pre class="brush:php;toolbar:false">.parent-div {
  position: relative;  
}

.inner-div {
  position: absolute;
  bottom: 0;
}

Cette approche fait flotter efficacement le div interne dans le coin inférieur droit de son conteneur parent, en conservant le comportement d'habillage de texte souhaité.