2

Народ, всем привет. Помогите пожалуйста, имеется следующий затуп: верстаю макет, тут есть блок с постами блога. Хочу сделать так, чтобы все посты растягивались по высоте по мере необходимости: допустим в одном из постов, в заголовке, много текста и соседние тянутся, чтобы соответствовать ему по высоте. Но не выходит: div с контентом не растягивается по высоте родителя, а остаётся фиксированным. Подскажите, как вылечить.введите сюда описание изображения

<article class="post">
    <div class="post-image">
        <img src="pics/blog/1.jpg" alt="blog post picture">
    </div>
    <div class="post-info">
        <div class="post-header">
            <h3>all about headshots inside professional studios</h3>
        </div>
        <div class="sub-info">
            <div class="comments">
                <img src="pics/icons/common/comments.png" alt="comments">
                <span>15 Comments</span>
            </div>
            <div class="date">
                <span>June, 2021</span>
            </div>
        </div>
    </div>
</article>
.blog .posts .post {
  flex: 0 1 32.16%;
  background: #f6f6f6;
  position: relative;
}
.blog .posts .post h3 {
  font-size: 1.25rem;
  font-family: Poppins-SemiBold, sans-serif;
  line-height: 1.4em;
  text-transform: uppercase;
}
.blog .posts .post-image img {
  display: block;
}
.blog .posts .post-info {
  min-height: 200px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 22px 30px 26px;
}
.blog .posts .sub-info {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog .posts .sub-info .comments {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  align-items: center;
}

11
  • 1
    вставляйте впредь скомпилированный код CSS 11 авг 2021 в 7:50
  • хорошо, но зачем? 11 авг 2021 в 7:51
  • 1
    для удобства отвечающего, чтобы дать ответ, нужно не только разобрать ваш код, но еще и зачем-то искать компилятор 11 авг 2021 в 7:52
  • 2
    к тому же, вы вставляете миксины, содержимое которых никому неизвестно кроме вас, как увидеть достоверный код? 11 авг 2021 в 7:54
  • 1
    спасибо, друзья) я в сердцах не заметил, что миксины у меня там, уже глаза от этих кодов замылились... 11 авг 2021 в 8:35

1 ответ 1

2

Для класса post можно попробовать установить

display: flex;
flex-direction: column;

А для post-info

flex: auto;
height: auto
1
  • Спасибо огромное!) Вылечили) 11 авг 2021 в 12:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.