Как правильно разместить текст внизу дива?

Question

[nikabekish]

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

текущие стили:
.banner-img {
position: relative;

width: 100%;
height: 200px;
border-radius: 5px 5px 5px 5px;
background-repeat: no-repeat;
background-size: cover;

background-image: url("1.jpg");
}

.banner-img .pic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

.banner-img .price {
position:relative;
top:168px;
left:12px;
line-height: 24px;
font-size: 18px;
float: left;
color:#fff;
font-family: "Helvetica Neue",Verdana, Arial, sans-serif;
font-weight: 900;
}

.banner-img .price2 {
position: relative;
top:168px;
line-height: 22px;
font-size: 14px;
font-family: "Helvetica Neue",Verdana, Arial, sans-serif;
font-weight: 900;
padding: 0 0 0 0px;
color: #fff;

}

Answer 1

[ixon]

Правильней всего сделать элемент container с position:relative; и display:block, а внутри него поместить блок с position: absolute; и display:block, снобдив его свойством bottom:0;
Вот пример того, что должно получиться:
https://codepen.io/anon/pen/ejXGaW

Comments

[snap44]

Правильней всего сделать это на флексах.

[ixon]

snap44, флексы на данный момент поддерживаются не всеми браузерами, это приведёт к ужасающим костылям, которые придётся внедрить ради совместимости. К тому же, я думаю, ТС вряд ли знаком с ними, в его коде они не упоминаются. Не вижу смысла усложнять, когда и без флексов всё у всех будет прекрасно работать.

[nikabekish]

ixon, все получилось!огромное спасибо вам.
если я теперь хочу изменить отступы от дива price, делать это через margin?

[snap44]

ixon, вот это поворот. Уже гриды на подходе, а вы флексы боитесь юзать.

[ixon]

nikabekish, не забывайте отмечать ответы, которые вам помогли решениями.
Да, через margin или поменяйте свойство bottom на Npx, где N -количество пикселей снизу.
snap44, зачем усложнять там, где можно обойтись без этого? Это всё равно, что делать какую-нибудь банальную визитку через webgl, создавая собственные шейдеры для каждого собственного элемента.

[snap44]

ixon, зачем лепить костыль если есть инструмент для выравнивания?