Pregunta CSS: ¿cómo colocar el elemento en la esquina inferior derecha?


Estoy tratando de posicionar 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íquelo para poder conquistar CSS!

alt text


75
2017-10-18 01:13


origen


Respuestas:


Digamos que su HTML se ve así:

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

Luego, con CSS, puede hacer que el 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 primario relativamente posicionado, o la ventana. Porque establecemos la posición de la caja como relativa, .bet_time coloca su borde derecho en el borde derecho de .box y su borde inferior al borde inferior de .box


160
2017-10-18 01:21



Establecer 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. A continuación, configure el siguiente CSS en la línea "Apostar 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.


18
2017-10-18 01:18