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

101

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

альтернативный текст

css

— керуилин
источник

Было бы проще, если бы вы показали нам свои HTML и CSS, которые у вас есть.

— Джон Хартсок

По поводу освоения CSS я настоятельно рекомендую следующую книгу books.google.ie/books/about/…

— Филип Мерфи

Ответы:

219

Допустим, ваш 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

— Остин Хайд
источник

Но как это решить, если .boxсамо должно быть position:absolute? Невозможно?

— Black

Ваш .boxпо-прежнему position:relative.

— Black

.box2isposition:absolute

— Остин Хайд

Возможно, вам придется установить родителяdisplay:inline-block;

— BillyNair

контейнер должен быть относительным, а содержимое в нем должно быть абсолютным для позиционирования, великолепно! спасибо

— Haryono Sariputra

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

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

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

— Пожалуйста
источник