Как сохранить высоту блока CSS равной при загрузке контента через фид JSON
Я столкнулся с проблемой со многими движущимися частями и некоторое время колотил ею по стене.
Короче говоря, мне нужно перетащить данные JSON на страницу WordPress (готово, проблем там нет) и отобразить их в табличном формате блоков. Я приложил макет изображения того, к чему я стремлюсь: https://i.imgur.com/HAaKPYj.jpg
Я дошел до того, что ящики отображаются правильно — по три в ряду, хорошо упакованные и так далее. Единственное, что осталось, это то, что я не могу сделать так, чтобы высоты блоков были одинаковой ширины в каждом ряду.
Я знаю, что это можно сделать со строками и чем-то вроде Flexbox, но проблема в том, что я извлекаю данные из фида JSON и создал только единый цикл foreach вещь. Я полностью согласен с повторным выполнением CSS полностью, если есть хороший подход к обработке, который даст поля одинаковой высоты.
Грубо говоря, структура коробки:
<div class="single-event">
<img src="example.jpg">
<div class="event-details">
<div class="event-type">In-Person</div>
<h3>Header</h3>
<p>The excerpt/description pulled from the feed</p>
<a href="#feed-url">»</a>
</div><!-- end .event-details -->
</div><!-- end .single-event -->
Есть ли хитрый CSS-трюк, о котором я не подозреваю, чтобы сделать это, или было бы лучше использовать что-то вроде JavaScript для вставки строк flexbox через каждые три элемента, и если да, то есть ли руководство, как начать решать эту проблему?
Заранее спасибо!
Решение
Один из способов — установить фиксированную высоту для всех блоков с помощью CSS.
Или вы также можете сделать это через JS после загрузки всех коробок следующим образом:
let biggestHeight = 0;
const boxes = document.querySelectorAll('.single-event')
// First loop throught the boxes to get the biggest height
boxes.forEach((box) => {
const boxHeight = window.getComputedStyle(box).getPropertyValue('height')
biggestHeight = boxHeight > biggestHeight ? boxHeight : biggestHeight
})
// Second loop throught the boxes to set the height
boxes.forEach((box) => {
box.style.height = biggestHeight + 'px'
})
Другие решения
Других решений пока нет …