Estoy intentando colocar el elemento de texto "Apuesta hace 5 días" en la esquina inferior derecha. ¿Cómo puedo lograr esto? Y, lo que es más importante, ¡explícame para que pueda conquistar CSS!
Estoy intentando colocar el elemento de texto "Apuesta hace 5 días" en la esquina inferior derecha. ¿Cómo puedo lograr esto? Y, lo que es más importante, ¡explícame para que pueda conquistar CSS!
Respuestas:
Digamos que su HTML se parece a esto:
<div class="box">
<!-- stuff -->
<p class="bet_time">Bet 5 days ago</p>
</div>
Luego, con CSS, puede hacer que ese texto aparezca en la parte inferior derecha así:
.box {
position:relative;
}
.bet_time {
position:absolute;
bottom:0;
right:0;
}
La forma en que esto funciona es que los elementos absolutamente posicionados siempre se posicionan con respecto al primer elemento padre relativamente posicionado, o la ventana. Debido a que establecemos la posición de la caja en relativa, .bet_time
coloca su borde derecho al borde derecho de .box
y su borde inferior al borde inferior de.box
.box
tiene que serlo position:absolute
? ¿Imposible?
.box
está quieto position:relative
.
.box2
esposition:absolute
display:inline-block;
Configure el CSS position: relative;
en la caja. Esto hace que todas las posiciones absolutas de los objetos en el interior sean relativas a las esquinas de esa caja. Luego, configure el siguiente CSS en la línea "Apuesta hace 5 días":
position: absolute;
bottom: 0;
right: 0;
Si necesita espaciar el texto más lejos del borde, puede cambiar 0
a 2px
o similar.