CSS: comment positionner l'élément en bas à droite?

Question

J'essaie de positionner l'élément de texte "Pari il y a 5 jours" dans le coin inférieur droit. Comment puis-je accomplir cela? Et, plus important encore, veuillez expliquer afin que je puisse vaincre le CSS!

Answer 1

Disons que votre HTML ressemble à quelque chose comme ceci:

<div class="box">
    <!-- stuff -->
    <p class="bet_time">Bet 5 days ago</p>
</div>

Puis, avec les CSS, vous pouvez faire que le texte s'affiche en bas à droite comme ceci:

.box {
    position:relative;
}
.bet_time {
    position:absolute;
    bottom:0;
    right:0;
}

La façon dont cela fonctionne est que les éléments en position absolue sont toujours positionnés par rapport à la première position relative élément parent, ou de la fenêtre. Parce que nous avons défini la zone de la position de par rapport, .bet_time des positions de son bord droit vers le bord droit de l' .box et son bord inférieur du bord inférieur de l' .box

Answer 2

Définissez le CSS position: relative; sur la boîte. Cela fait que toutes les positions absolues des objets à l'intérieur sont relatives aux coins de cette boîte. Ensuite, définissez le code CSS suivant sur la ligne "Pari il y a 5 jours":

 position: absolute;
bottom: 0;
right: 0;
 

Si vous devez espacer le texte plus loin du bord, vous pouvez changer 0 en 2px ou similaire.