0

Есть: контейнер, внутри которого несколько карточек. Они отрисовываются в цикле, ширина у них адаптивная. Количество карточек в одной строке меняется в зависимости от экрана.

Надо: чтобы высота всей строки подстраивалась под высоту самой большой карточки. Например, в первую строку влезло три карточки, высота наибольшей - 300px, значит, две другие подстраиваются под неё. Если во второй строке наибольшая карточка - 400px, вторая строка будет этой высоты.

Сейчас у меня получается или менять высоту одной карточки, или сразу все. Пробовала высчитывать количество карточек в строке, делать массив из них и менять высоту для каждой,но это не учитывает адаптивность. Также пробовала менять цикл, чтобы он заданное количество карточек помещал в один контейнер, но и это не учитывает адаптив. Возможно, есть какой-то метод, который может определить количество элементов в строке в зависимости от ширины экрана?

Так что очень нужны свежие идеи, заранее спасибо :) Блок с карточками + есть старый код с jQuery, выравнивающий высоту всех карточек.

window.onload = function () {
  $(window)
    .on("resize", () => {
      // Привести к одной высоте
      var newsBlock = [];
      var newsBlockMax = 0;
      var newsLink = newsBlock;
      var newsLinkMax = newsBlockMax;
      $(".news-block").css("height", "auto");
      $(".news-block__link").css("height", "auto");
      $(".news-block").each(function (index) {
        newsBlock[index] = $(this).height();
        if (newsBlockMax < newsBlock[index]) {
          newsBlockMax = newsBlock[index];
        }
      });
      $(".news-block__link").each(function (index) {
        newsLink[index] = $(this).outerHeight();
        if (newsLinkMax < newsLink[index]) {
          newsLinkMax = newsLink[index];
        }
      });
      $(".news-block__link").outerHeight(newsLinkMax);
      $(".news-block").css("padding-bottom", newsLinkMax + "px");
      $(".news-block").height(newsBlockMax);
    })
    .resize();
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="news-wrap fl">
  <div class="news-block">
    <div class="news-block__img">
      <a href="/1289/9141/145/142/9216">
        <img src="/103569847-320-213:g.jpeg" alt="" title="" />
      </a>
    </div>
    <div class="news-block__desc">
      <div class="news-block__desc-date">
        <p>28 декабря 2022</p>
      </div>
      <div class="news-block__desc-title">
        <a href="/1289/9141/145/142/9216"
          >О встрече Руководителей и Секретариата ОДКБ</a
        >
      </div>
    </div>
  </div>

  <div class="news-block">
    <div class="news-block__img">
      <a href="/1289/9141/145/142/9218">
        <img src="/103569852-320-213:g.jpeg" alt="" title="" />
      </a>
    </div>
    <div class="news-block__desc">
      <div class="news-block__desc-date">
        <p>21 декабря 2022</p>
      </div>
      <div class="news-block__desc-title">
        <a href="/1289/9141/145/142/9218">Об участии в брифинге КТК СБ ООН</a>
      </div>
    </div>
  </div>

  <div class="news-block">
    <div class="news-block__img">
      <a href="/1289/9115/9116/9118/9222">
        <img src="/103424764-320-213:g.jpeg" alt="" title="" />
      </a>
    </div>
    <div class="news-block__desc">
      <div class="news-block__desc-date">
        <p>16 декабря 2022</p>
      </div>
      <div class="news-block__desc-title">
        <a href="/1289/9115/9116/9118/9222"
          >О заседании постоянно действующего совещания при Руководителе с
          участием полномочных представителей государств Содружества</a
        >
      </div>
    </div>
  </div>

  <div class="news-block">
    <div class="news-block__img">
      <a href="/1289/9141/9108/9142/9220">
        <img src="/103569857-320-213:g.jpeg" alt="" title="" />
      </a>
    </div>
    <div class="news-block__desc">
      <div class="news-block__desc-date">
        <p>13 декабря 2022</p>
      </div>
      <div class="news-block__desc-title">
        <a href="/1289/9141/9108/9142/9220"
          >Об участии в форуме по&nbsp;профилактике деструктивной деятельности в
          молодежной среде</a
        >
      </div>
    </div>
  </div>
</div>

1
  • А как? Через CSS, как я вижу, можно сделать одинаковую высоту всех карточек или подстраиваемую под контент. Мне же надо, чтобы менялась высота строки по самой большой карточке. То есть, если есть 3 строки по 4 карточки в каждой, они должны быть разными по высоте в зависимости от количества текста в самой большой.
    – Lina R
    19 янв в 8:45

1 ответ 1

0

Вариант с использованием css. Grid по умолчанию работают именно так, как вы описываете.

.news-wrap {
  width: 400px;
  border: 1px solid #aaa;
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.news-block {
  background-color: #eee;
}
<div class="news-wrap fl">
  <div class="news-block">
    <div class="news-block__img">
      <a href="/1289/9141/145/142/9216">
        <img src="/103569847-320-213:g.jpeg" alt="" title="" />
      </a>
    </div>
    <div class="news-block__desc">
      <div class="news-block__desc-date">
        <p>28 декабря 2022</p>
      </div>
      <div class="news-block__desc-title">
        <a href="/1289/9141/145/142/9216"
          >О встрече Руководителей и Секретариата ОДКБ</a
        >
      </div>
    </div>
  </div>

  <div class="news-block">
    <div class="news-block__img">
      <a href="/1289/9141/145/142/9218">
        <img src="/103569852-320-213:g.jpeg" alt="" title="" />
      </a>
    </div>
    <div class="news-block__desc">
      <div class="news-block__desc-date">
        <p>21 декабря 2022</p>
      </div>
      <div class="news-block__desc-title">
        <a href="/1289/9141/145/142/9218">Об участии в брифинге КТК СБ ООН</a>
      </div>
    </div>
  </div>

  <div class="news-block">
    <div class="news-block__img">
      <a href="/1289/9115/9116/9118/9222">
        <img src="/103424764-320-213:g.jpeg" alt="" title="" />
      </a>
    </div>
    <div class="news-block__desc">
      <div class="news-block__desc-date">
        <p>16 декабря 2022</p>
      </div>
      <div class="news-block__desc-title">
        <a href="/1289/9115/9116/9118/9222"
          >О заседании постоянно действующего совещания при Руководителе с
          участием полномочных представителей государств Содружества</a
        >
      </div>
    </div>
  </div>

  <div class="news-block">
    <div class="news-block__img">
      <a href="/1289/9141/9108/9142/9220">
        <img src="/103569857-320-213:g.jpeg" alt="" title="" />
      </a>
    </div>
    <div class="news-block__desc">
      <div class="news-block__desc-date">
        <p>13 декабря 2022</p>
      </div>
      <div class="news-block__desc-title">
        <a href="/1289/9141/9108/9142/9220"
          >Об участии в форуме по&nbsp;профилактике деструктивной деятельности в
          молодежной среде</a
        >
      </div>
    </div>
  </div>
</div>

Ваш ответ

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

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