выравнить заголовки по низу

Question

у меня есть несколько h1 внутри div, как мне сделать так, чтобы они перместились из верха вниз

<div style="height: 400px; background-color: #facefa">
    <h1 style="background-color: aqua">123</h1>
    <h1 style="background-color: black">123213</h1>
    <h1 style="background-color: yellow">123213</h1>
    <h1 style="background-color: green">123213</h1>
</div>

это выглядит так, а мне надо чтобы они приклеились к низу и не вылезали за div

Answer 1

Можно вот так сделать:

.container {
  position: relative; /* Заставляем "плавающий" контейнер wrapper учитывать границы блока container */
}

.container>.wrapper {
  width: 100%; /* Контейнеру wrapper устанавливаем ширину на ширину родительского блока */
  position: absolute; /* Блок wrapper делаем плавающим с абсолютным позиционированием */
  bottom: 0; /* Прижимаем блок wrapper к низу родительского контейнера */
  right: 0; /* Прижимаем блок wrapper к правому краю родительского контейнера */
}

<div style="height: 400px; background-color: #facefa" class="container">
  <div class="wrapper">
    <h1 style="background-color: aqua">123</h1>
    <h1 style="background-color: black">123213</h1>
    <h1 style="background-color: yellow">123213</h1>
    <h1 style="background-color: green">123213</h1>
  </div>
</div>

Или вот так:

.container {
  box-sizing: border-box; /* Запрещаем отступу (padding) увеличивать размер блока container */
  padding-bottom: 250px; /* Устанавливаем padding снизу блока container. Для того, что-бы контент в блоке container не смог разместиться под блоком wrapper */
}

.wrapper {
  margin-top: -250px; /*Используя отрицательный margin располагаем блок wrapper поверх блока container в нижней области данного блока. */
}

<div style="height: 400px; background-color: #facefa" class="container">
</div>

<div class="wrapper">
  <h1 style="background-color: aqua">123</h1>
  <h1 style="background-color: black">123213</h1>
  <h1 style="background-color: yellow">123213</h1>
  <h1 style="background-color: green">123213</h1>
</div>

И так можно:

.container {
  display: flex; /* Включаем технологию flex в блоке container */
  flex-direction: column; /* Устанавливаем направление главной оси вертикально */
 justify-content: end; /* Прижимаем элементы к низу */
}

<div style="height: 400px; background-color: #facefa" class="container">
  <div class="wrapper">
    <h1 style="background-color: aqua">123</h1>
    <h1 style="background-color: black">123213</h1>
    <h1 style="background-color: yellow">123213</h1>
    <h1 style="background-color: green">123213</h1>
  </div>
</div>

И так тоже можно:

.container {
  display: grid; /* Включаем в блоке container технологию grid */
  grid-template-rows: 1fr 250px; /* Разделяем блок container на две строки. Верхняя строка буде занимать все свободное пространство. Нижняя предназначена для блока wrapper в котором находятся заголовки */
}

.wrapper {
  grid-row: -1/-2; /* Помещаем блок с заголовками в нижнюю строку */
}

<div style="height: 400px; background-color: #facefa" class="container">
  <div class="wrapper">
    <h1 style="background-color: aqua">123</h1>
    <h1 style="background-color: black">123213</h1>
    <h1 style="background-color: yellow">123213</h1>
    <h1 style="background-color: green">123213</h1>
  </div>
</div>

БЛОГ НА HUSL

выравнить заголовки по низу

Ответы (1 шт):