CSS: как разместить элемент в правом нижнем углу?

Я пытаюсь разместить текстовый элемент "ставка 5 дней назад" в правом нижнем углу. Как я могу это сделать? И, что еще более важно, Пожалуйста, объясните, чтобы я мог победить CSS!

2 77
css

2 ответа:

допустим, ваш HTML выглядит примерно так:

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

затем, с помощью CSS, вы можете сделать этот текст отображается в правом нижнем углу следующим образом:

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

это работает так, что абсолютно позиционированные элементы всегда расположены относительно первого относительно позиционированного родительского элемента или окна. Потому что мы устанавливаем положение коробки относительно, .bet_time позиционирует его правый край к правому краю .box и ее нижний край к нижнему краю .box

164

установите CSS position: relative; на коробке. Это заставляет все абсолютные положения объектов внутри быть относительно углов этой коробки. Затем установите следующий CSS в строке "ставка 5 дней назад":

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

Если вам нужно разместить текст дальше от края, вы можете изменить 0 до 2px или аналогичные.

19