CSS: jak ustawić element w prawym dolnym rogu?

Question

Próbuję umieścić element tekstowy "Bet 5 dni temu" w prawym dolnym rogu. Jak mogę to zrobić? I, co ważniejsze, proszę wyjaśnij, abym mógł podbić CSS!

Answer 1

Powiedzmy Twój HTML wygląda mniej więcej tak:

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

Potem, CSS, można sprawić, aby tekst pojawia się w prawym dolnym rogu tak:

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

Sposób ten działa jest że elementy pozycjonowane bezwzględnie są zawsze pozycjonowane względem pierwszego względnie pozycjonowanego elementu rodzica lub okna. Ponieważ możemy ustawić pozycję pudełka do względnej .bet_time pozycjonuje jego prawej krawędzi do prawej krawędzi .box a jej dolna krawędź do dolnej krawędzi .box

Answer 2

Ustaw CSS position: relative; na opakowaniu. Powoduje to, że wszystkie bezwzględne położenia obiektów wewnątrz są względem narożników tego pola. Następnie ustaw następujące CSS w wierszu „Bet 5 dni temu”:

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

Jeśli potrzebujesz miejsca na tekst dalej od brzegu, można zmienić 0 do 2px lub podobnym.