使php生成的div具有相同的高度响应性

问题: 当我调整屏幕大小时，有些标题超过一行文字。这使得我的布局看起来很奇怪

首选解决方案： 图像、标题和副标题保持不变。“更多”按钮在div底部对齐，div高度由该行中的最高项确定。所有这些都必须是响应性的，所以固定高度不是解决方案

PHP

---

您可以使用javascript和jQuery解决方案来解决这个问题。我在过去使用过这个库，它完全按照您所描述的方式工作

库将查看行中的所有项目，并计算高度最大的项目。之后，它将该高度应用于行中的所有其他项。您可以执行类似的操作：

$（'.row eq height'）.matchHeight（）

但是，您也可以使用来解决此问题。这样做的一个好处是，它不再需要额外的JS资产。一个缺点是不是每个浏览器都支持它

您可以添加以下CSS：

#disc-overview {
  display: flex;
}

您还可以使用
flex wrap
属性并将其设置为
wrap
，以允许项目流到下一行，它与bootstrap 3.x提供的内置
img responsive
类结合使用效果很好。
您可以提供它输出的HTML吗？我收到一条错误消息，它太大，无法粘贴到消息中。这有帮助吗？[链接]（查看来源：）编辑：我将其添加到原始帖子@Kevinjantzer的可能副本抱歉，我是个初学者，我应该将$（'.row eq height'）.matchHeight（）放在哪里@tampie这是javascript选项，因此在jQuery加载后需要将其包含在标记或外部js文件中。@tampie您可以将其放在您的rwdb-custom.js文件中，但不要忘记包含匹配高度插件。在jQuery文件之后和调用matchHeight函数之前加载它。因此，您可以在jQuery之后和自定义js文件之前加载它。太棒了，非常感谢您的帮助。它就像一个符咒：）
    #disc-overview {
    padding-top: 50px;
    background-color: #ffffff;
    display: table;
    width: 100%;
}

.disc-overview {
    background-color: #ffffff;
    text-align: center;
    padding-bottom: 50px;
    display: table-cell;
}

.disc-overview img {
    width: 100%;
    vertical-align: middle;
    padding-bottom: 30px;
}

.card {
    text-align: center;
    border: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    position: absolute;
}

.card-title {
    text-align: center;
    color: #000000;
    letter-spacing: -1px;
    font-weight: 600;
    font-size: 20px;
}

.card-subtitle {
    margin-bottom: 0;
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    font-family: "Lora", serif;
    color: #5b5b5b;
    margin-top: -1rem;
    line-height: 1.7857;
    padding-bottom: 1rem;
    text-align: center;
}


.btn-card {
    background-color: #404040;
    border-color: #404040;
    letter-spacing: 2px;
    padding: 10px 20px;
    horiz-align: center;
    color: #ffffff;

}

.btn-card:hover {
    background-color: #f5f5f5;
    color: #404040;
    border-color: #404040;
    letter-spacing: 2px;
    padding: 10px 20px;

#disc-overview {
  display: flex;
}