通过 JSON 提要加载内容时如何保持 CSS 块高度相等答案

【问题标题】：How to keep CSS block height equal when loading content over JSON feed通过 JSON 提要加载内容时如何保持 CSS 块高度相等
【发布时间】：2019-02-06 21:17:34
【问题描述】：

我遇到了很多活动部件的问题，并且已经用它把我的头撞到墙上一段时间了。

简而言之，我需要将 JSON 数据拉入 WordPress 页面（完成，那里没有问题）并让它以类似表格的块格式显示。我在这里附上了我的目标图像模型：https://i.imgur.com/HAaKPYj.jpg

我已经到了正确显示框的地步——每行三个，包装很好，等等。剩下的一件事是我似乎无法让每行中的框高度都相同。

我知道这可以通过行和 Flexbox 之类的东西来完成，但问题是我从 JSON 提要中提取并且只创建了单个循环 foreach 项目。如果有一种处理 CSS 的好方法可以提供等高的盒子，我完全可以完全重新做 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">&raquo;</a>
    </div><!-- end .event-details -->
</div><!-- end .single-event -->

是否有一个我不知道的聪明的 CSS 技巧来做到这一点，或者使用 JavaScript 之类的东西每三个项目插入 flexbox 行是最好的解决方案，如果是这样，是否有关于如何开始处理的指南那个？

提前谢谢你！

【问题讨论】：

标签： php json wordpress flexbox

【解决方案1】：

一种方法是通过 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'

})

【讨论】：