CSS: як розташувати елемент праворуч внизу?

101

Я намагаюся розмістити текстовий елемент "Ставка 5 днів тому" в нижньому правому куті. Як я можу це досягти? І, що ще важливіше, поясніть, будь ласка, щоб я міг підкорити CSS!

alt текст

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? Неможливо?

— Чорний

Ваше .boxвсе ще position:relative.

— Чорний

.box2єposition:absolute

— Остін Гайд

Можливо, вам потрібно буде встановити батьківdisplay:inline-block;

— BillyNair

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

— Харіоно Саріпутра

Встановіть CSS position: relative;на поле. Це призводить до того, що всі абсолютні положення об'єктів всередині відносно кутів цього поля. Потім встановіть наступний CSS у рядку "Ставка 5 днів тому":

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

Якщо вам потрібно розмістити текст далі від краю, ви можете змінити його 0на 2pxабо подібне.

— Будь ласка
джерело