@Wamsmer

Как прилепить последний row к самому низу родительского col?

Доброго времени суток! Есть следующий код:
<div class="row d-flex justify-content-end">
  <div class="col-md-4">
    <div class="row d-flex align-items-end">
      <div class="col-md-3">
        <div class="schedule__img text-left">
          <img src="img/это_просто_картинка.png" alt="">
        </div>
      </div>
      <div class="col-md-9">
        <div class="schedule__date text-center">
          <p class="date">Надпись рядом с картинкой</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-left">
        <h3 class="schedule__name">Заголовок следующего списка</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-left align-items-center">
        <p class="schedule__list">
          <span class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
          </span>
        </p>
      </div>
    </div>
    <div class="row d-flex align-items-end">
      <div class="col-md-12 d-flex text-left">
        <h3 class="schedule__program_per">Примечание: </h3>
        <p class="schedule_period">
           &nbsp;Текст примечания
        </p>
      </div>
    </div>
  </div>


По задумке, рядом должны стоять три колонки (приведена одна), у которых должен быть верх и низ (с одинаковой информацией) на одном уровне, а содержание по середине может изменять свою высоту за счет кол-ва элементов списка.
Как можно решить данное? Если возможно, то средствами бутстрап, если нет, то css/
Заранее спасибо за ответы!

Дополнение:
5d1a5b60ad428376035657.png
Как сделать, чтобы желтый блок всегда был прилеплен к низу родительского блока?
<div class="container">
      <div class="row one">
        <div class="col-12">
          <div class="row">
            <div class="col-4">
              <div class="row">
                <div class="col-12 inside"></div>
              </div>
              <div class="row">
                <div class="col-12 inside2"></div>
              </div>
              <div class="row">
                <div class="col-12 inside3"></div>
              </div>
            </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>
        </div>
      </div>
    </div>
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
vadimkot
@vadimkot Куратор тега CSS
Пригласить эксперта
Ответы на вопрос 1
у флексов есть чудесная штука.
margin-top: auto;
В интернете видил отличную статью по этому поводу c примерами. и даже тыкал в рожу верстакам что все уже в этой жизни работает.
что-то похожее
https://webformyself.com/otzyvchivye-bloki-odinako...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы