Прижать элемент к самому низу контейнера.

336

one

13 октября 2016, 07:01

14999

Есть блок такой структуры:


<div>

        <div class="caption">

          <h4></h4>

          <p class="price">

          </p>

        </div>

</div>

Подскажите, как, чем прижать <p> к самому низу текущего контейнера?

Решения для автоматизации действий ( https://www.facebook.com/automationstudio20/ ) в интернете.

I2

38

indenger20

13 октября 2016, 07:19

#1

Либо использовать flexbox

либо на <p> вешать абсолютное позиционирование

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

1

Качественная верстка PSD макетов (/ru/forum/974524)

336

one

13 октября 2016, 07:49

#2

Спасибо за подсказку! Частично прижалось таким образом:


.price {
  align-items: flex-end;
  flex: 1 0 auto;
}

В некоторых блоках не срабатывает, что то мешает.

I2

38

indenger20

13 октября 2016, 08:11

#3

Если хотите флексом


.caption {

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}

336

one

13 октября 2016, 08:20

#4

Спасибо! Буду пробовать.