Как в верстке внутренний блок прижать к нижней части внешнего блока?

Question

[Raul Abdullin]

Нужно сделать так, т.е. белая плашка прижата к нижней части блока с фото:


У меня вот так, т.е. прижат к верхней части фото:

Answer 1

[xmoonlight]

HTML:

<div class="poster">
  <div class="info">
      Lorem ipsum...
  </div>
</div>

CSS:

.poster {
   display:inline-block;
   width:100%;
   position:relative;
}
.poster .info {
   position:absolute;
   left:0px;
   bottom:0px;
}

Comments

[Raul Abdullin]

не работает, ps верстаю на сетке бутстрап 3

[Иван]

raulvodov, 2018 год на дворе,а люди всё верстают на буте 3

[xmoonlight]

raulvodov, советую подумать над инструментом.

[Сергей delphinpro]

Иван,

2018 год на дворе,а люди всё верстают на буте 3

2018 год на дворе, а всё еще существуют люди хейтящие проверенные инструменты к месту и не к месту.
Мне вот интересно, это те же самые распи*****яи, что и в 2016-ом, или свежие подросли?

Иван, запомни посыл. Если ты что-то хейтишь — предлагай, б***ь, альтернативу!!!!

И особо отмечаю для особо одарённых — я НЕ за бутстрап, я НЕ за голый флекс/грид, я не за [какую-то там хе**ю].
Профи, вы обосновывайте свои ответы. Молодняку легче будет ориентироваться.
Пиздюки, почувствовавшие себя взрослыми — учитесь, сука, дальше... без выебо***нов

[xmoonlight]

Сергей, не слова, а музыка! +100500

[Evgeny Zaharov]

position: relative и не должно было ничего изменить. Оно позволяет позиционировать элемент относительно своего обычного положения на странице. С position: absolute - можно относительно родителя, только родителю надо задать position: relative, чтобы точкой отсчета координат было не окно браузера.

[Иван]

Сергей, Абсолютно разделяю вашу точку зрения :)

Раскрою свой посыл что имел ввиду я.
Имелось ввиду чтобы люди пробовали новые вещи,тот же флекс+грид ,чтобы люди не стояли на месте,а развивались, бут 3 неплох,но сейчас есть уже 4 бут. Я за то,чтобы расширяли свой проф.кругозор люди,тогда они лучше бы знали,какой инструмент подходит для какого случая лучше.

[xmoonlight]

Ankhena, поправил, Спасибо!

[Raul Abdullin]

xmoonlight, что-то не то по-моему вы подсказываете. Вот что получается, если делать так, как вы описали:

<div class="main-video">
		<div class="container">
			<div class="row">
				
					<div class="col-md-6">
						<div class="video-text">
								<h3 class="near-titles">Best People</h3>
								<h2>
									Interview
								</h2>
								<p class="under-title">Do you consider yourself a designer, or have you evolved more into a business executive with a design perspective?</p>
								<div class="play-video">
									<button class="video-btn">Play</button>
									<a>Watch Video</a>
								</div>
						</div>
					</div>

			</div>
		</div>
	</div>

.main-video {
	position:relative;
	width: 100%;
	background: url(../img/video.jpg) 50% no-repeat #FEF4F3;
	background-size: cover;
	min-height: 600px;
}

.main-video .video-text {
	position: absolute;
	background-color: #fff;
	padding-right: 50px;
	padding-top: 50px;
	bottom: 0px;
}