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

Question

[Петр Волханов]

Дорабатываю сайт, на сайте есть блок с картинкой, которая прижата к низу родительского блока.


Но при ширине экрана в 1024 пикселей картинка не прижата к нижней линии родительского блока. Как выровнять картинку по нижней линии родительского блока?


Пробовал так, но не помогло:

.post-entry{
		display: table;
	}
	.post-entry .avia-image-container{
		display: table-cell;
		vertical-align: bottom;
	}

Answer 1

[pingvisha]

.post-entry{
  position: relative;
}
.post-entry .avia-image-container{
  position: absolute;
  bottom: 0;
}

Comments

[Петр Волханов]

pingvisha этот CSS вообще сломал отображение, может я не правильно выбрал элементы...

[SirMustache]

Зашел как раз когда этот совет сломал верстку, смешно :)

[Петр Волханов]

SirMustache: да, но я уже убрал эти CSS правила!

Answer 2

[SirMustache]

Насколько я вижу, тот тут изображение прижимается неким костылем - блоком над ним. При уменьшении ширины экрана текстовый блок сужаясь рядом увеличивается по высоте и этому костылю не хватает заданных ему 50px чтобы "дожать" изображение вниз. Судя по тому, что высота задана атрибутом style - до делает это скрипт, копал бы в эту сторону.

Comments

[Петр Волханов]

SirMustache посоветуете убрать горизонтальную линию, которая делает отступ 50px?

[Петр Волханов]

И попробовать прижать картинку только CSS стилями... ?

Answer 3

[Виталий Бобров]

если позволяет поддержка браузеров - лучше использовать flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/