检查动态生成的 div 的最大高度答案

【问题标题】：Checking biggest heigh from dynamic generated divs检查动态生成的 div 的最大高度
【发布时间】：2021-08-25 04:19:31
【问题描述】：

我有一个基于 php 代码生成的 div 结构。每行有 3 个 div。它是这样生成的：

定义列：

<?php
    $numOfCols = 3;
    $rowCount = 0;
    $bootstrapColWidth = 12 / $numOfCols;
?>

第一行，开始循环并定义宽度：

<div class="row">

   @foreach($datas as $data)
   <div class="col-md-<?php echo $bootstrapColWidth; ?>">

然后是一堆内容。

然后，最后，每个循环都会在rowcount上加一，并检查该行是否已经结束，所以我们可以添加一个新的：

<?php
    $rowCount++;
    if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
?>
            @endforeach

现在，一切都很好，问题是当我在每个 div 上添加不同数量的内容时，高度变得不同，最终变得非常丑陋。

我正在尝试做的事情：我正在尝试检查每一行中哪个 div 的高度最大，因此我可以将相同的高度应用于其他两个。

-我想过给每个递增的 div 添加一个 id，问题是我不知道会有多少个 div，所以我无法为每个结果做好准备。

-我尝试使用 $('row div') 选择每一行，问题是所有 div 将变得与最大的相同。我想逐行检查。

抱歉问题太长了，感谢您的意见！

【问题讨论】：

你在使用 Bootstrap 吗？如果是，您使用的是什么版本？
使用flexbox，它会自动完成，不需要js
是的，我使用的是 Bootstrap 4.0
至于flexbox，我没想到！感谢您的提示，可能会成功！

标签： php jquery html css bootstrap-4

【解决方案1】：

Bootstrap 4 有 flexbox classes 允许您仅使用 css 来执行此操作。看看这个例子：https://getbootstrap.com/docs/4.3/utilities/flex/#align-self

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex">
    <div class="align-self-stretch mr-3" style="background-color:lightblue">Aligned flex item</div>
    <div class="align-self-stretch mr-3" style="background-color:lightblue">Aligned flex item<br />With<br />More<br />Lines</div>
    <div class="align-self-stretch" style="background-color:lightblue">Aligned flex item</div>
</div>

【讨论】：

【解决方案2】：

我认为 flex-box 是您的解决方案：所有放入 flex 容器的高度都相同。

<div style="display:flex">
   <div>
      ... some content
   </div>
   <div>
      ... some content
   </div>
</div>

【讨论】：

【解决方案3】：

你可以在 Bootstrap 4 中使用.row-eq-height

【讨论】：