Как выравнивать текст по нижней границе div?

Question

[relows]

Мне нужно, чтобы текст "66 000р" прилип к нижней части выделенного div элемента.


Как на следующем скрине:

Answer 1

[Rustam Bainazarov]

Типичная задача.

Для родителя:
display: flex;
flex-flow: column wrap; (чтобы в колонку)
justify-content: space-between; (распределяет дочерние элементы равномерно в рамках родительского блока)

А для детей нужно подбирать параметры свойств flex-grow, flex-shrink и flex-basis (например, flex: 1 0;), чтобы нужные элементы росли по высоте, заполняя пространство, а нижний элемент с ценой — нет.

Пришлите код, иначе будет сложно сказать, что куда подставить. Возможно, нужно будет разметку менять. Скорее всего, flexbox так же будет необходим на всём блоке, чтобы колонки с текстом и фото были равны по высоте.

https://jsfiddle.net/w1pzu5rh/1/.
Зоны выделил разными цветами. Верстка на коленке, но алгоритм будет понятен. Под реальности проекта нужно, конечно, подстроить (ту же минимальную высоту поставить блоку, если нужно, реальные размеры, верстку и т. п.).

Comments

[relows]

Это какой-то криндж, но сейчас попробую.

[Rustam Bainazarov]

relows, это никакой не кринж, это абсолютно стандартное действие для подобных ситуаций, если вы хотите автоматическое выравнивание контента по границам, исходя из общей высоты.

[relows]

Код вот:

<div class="container mb40">
		<div class="row justify-content-between mb30">
			<div class="col-auto"><h3>ПОПУЛЯРНЫЕ МОДЕЛИ НЕМАН</h3></div>
			<div class="col-auto"><h5>СМОТРЕТЬ ВСЕ МОДЕЛИ</h5></div>
		</div>
		<div class="row">
			<div class="col">
				<div class="object border1px">
					<b style="font-size: 15.2px;">Дверь НЕМАН Н-102</b>
					<div class="row" style="margin-top: 5%;">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6" style="font-size: 10px; text-align: right; margin-top: -5px;"><b style="font-size: 14px;">2 класс</b><br />безопасности 
							<div class="row">
								<div class="col-12"><img src="img1/micro.png" alt="" style="max-width: 100%; height: auto;"></div>
								<div class="col-12"><b style="font-size: 16px;">66 000p</b></div>
							</div></div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="object border1px">
					<b style="font-size: 15.2px;">Дверь НЕМАН Н-102</b>
					<div class="row" style="margin-top: 5%;">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6" style="font-size: 10px; text-align: right; margin-top: -5px;"><b style="font-size: 14px;">2 класс</b><br />безопасности 
							<div class="row">
								<div class="col-12"><img src="img1/micro.png" alt="" style="max-width: 100%; height: auto;"></div>
								<div class="col-12"><b style="font-size: 16px;">66 000p</b></div>
							</div></div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="object border1px">
					<b style="font-size: 15.2px;">Дверь НЕМАН Н-102</b>
					<div class="row" style="margin-top: 5%;">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6" style="font-size: 10px; text-align: right; margin-top: -5px;"><b style="font-size: 14px;">2 класс</b><br />безопасности 
							<div class="row">
								<div class="col-12"><img src="img1/micro.png" alt="" style="max-width: 100%; height: auto;"></div>
								<div class="col-12"><b style="font-size: 16px;">66 000p</b></div>
							</div></div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="object border1px">
					<b style="font-size: 15.2px;">Дверь НЕМАН Н-102</b>
					<div class="row" style="margin-top: 5%;">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6" style="font-size: 10px; text-align: right; margin-top: -5px;"><b style="font-size: 14px;">2 класс</b><br />безопасности 
							<div class="row">
								<div class="col-12"><img src="img1/micro.png" alt="" style="max-width: 100%; height: auto;"></div>
								<div class="col-12"><b style="font-size: 16px;">66 000p</b></div>
							</div></div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="object border1px">
					<b style="font-size: 15.2px;">Дверь НЕМАН Н-102</b>
					<div class="row" style="margin-top: 5%;">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6" style="font-size: 10px; text-align: right; margin-top: -5px;"><b style="font-size: 14px;">2 класс</b><br />безопасности 
							<div class="row">
								<div class="col-12"><img src="img1/micro.png" alt="" style="max-width: 100%; height: auto;"></div>
								<div class="col-12"><b style="font-size: 16px;">66 000p</b></div>
							</div></div>
					</div>
				</div>
			</div>

[relows]

SmthTo, а вот img1/micro.png
и img1/n21.jpg

[Rustam Bainazarov]

relows, сейчас я вам рабочий пример кину.

[relows]

SmthTo, Звучит неплохо)

[Rustam Bainazarov]

https://jsfiddle.net/w1pzu5rh/1/.
Зоны выделил разными цветами. Верстка на коленке, но алгоритм будет понятен. Под реальности проекта нужно, конечно, подстроить (ту же минимальную высоту поставить блоку, реальные размеры, верстку и т. п.).

[relows]

SmthTo, Спасибо вам большое! Я сейчас посмотрел всего один урок про то как правильно флексить, и понял что мне этот бутстрап вообще не нужен(до этого про flex я только слышал)

[Rustam Bainazarov]

relows, не за что; обновил ссылку:
https://jsfiddle.net/w1pzu5rh/1/.

Чтобы вы понимали, как он строит размеры.

[relows]

SmthTo, У меня вопрос по поводу тостера и того зачем вы здесь отвечаете: "Зачем вы с такими знаниями отвечаете на вопросы таких как я, если можно брать на фрилансе заказы?"
Просто интересно.

[Rustam Bainazarov]

relows, по приколу.

P. S. LOL.

[relows]

SmthTo, Если вы такой альтруист, не могли бы дать мне какие то свои контакты, или добавить меня в вк?)) vk.com/relows

[Rustam Bainazarov]

relows, меня нет в ВК. Могу дать советы только в рамках данного ресурса раз в неделю или две.

P. S. LOL.
P. P. S. Я не до конца альтруист.
P. P. P. S. LOLOLOLOL.

[relows]

SmthTo, :)

Answer 2

[Anubis]

Главному блоку position: relative, блоку с ценой position: absolute; bottom: 0

Comments

[Abdula Magomedov]

Если высота не фиксированная, то будет накладываться друг на друга. И под разные экраны плохо адаптируется.