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

101

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 pour que je puisse conquérir CSS!

texte alternatif

css kéruiline
la source
8
Ce serait plus facile si vous nous montriez votre HTML et CSS que vous avez actuellement.
John Hartsock
Sur la conquête du CSS, je recommande vivement le livre suivant books.google.ie/books/about/…
Philip Murphy

Réponses:

219

Disons que votre HTML ressemble à ceci:

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

Ensuite, avec CSS, vous pouvez faire apparaître ce texte 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 positionnés de manière absolue sont toujours positionnés par rapport au premier élément parent positionné relativement, ou à la fenêtre. Comme nous définissons la position de la boîte sur relative, .bet_timepositionne son bord droit sur le bord droit de .boxet son bord inférieur sur le bord inférieur de.box

Austin Hyde
la source
Mais comment le résoudre s'il le .boxfaut position:absolute? Impossible?
Noir
Votre .boxest toujours position:relative.
Noir du
.box2estposition:absolute
Austin Hyde
Vous devrez peut-être définir le parent pour êtredisplay:inline-block;
BillyNair
le contenant doit être relatif, et le contenu qu'il contient doit être absolu pour le positionnement, brillant! merci
Haryono Sariputra
26

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 CSS suivant sur la ligne "Parier il y a 5 jours":

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

Si vous avez besoin d'espacer le texte plus loin du bord, vous pouvez changer 0en 2pxou similaire.

Veuillez vous lever
la source