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

Question

问题： 当我调整屏幕大小时，某些标题超过一行文本。这导致我的布局看起来很奇怪。

首选解决方案： 图像、标题和副标题保留在原处。更多按钮在div 的底部对齐，div 高度由该行中最高的项目确定。这一切都必须是响应式的，所以固定的高度不是解决方案。

.PHP

<section id="disc-overview">
<?php
$sql = "SELECT id, title, date_released, produced_by, arranged_by, recorded_at, seo_link, taken_from FROM discography_overview WHERE artist = '1' AND type = '$type' ORDER BY date_released DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$id = $row["id"];
$title = $row["title"];
$date_released = $row["date_released"];
$date = DateTime::createFromFormat('Y-m-d', $date_released);
$date_released = $date->format('F jS, Y');
$produced_by = $row["produced_by"];
$arranged_by = $row["arranged_by"];
$recorded_at = $row["recorded_at"];
$seo_link = $row["seo_link"];
$taken_from = $row["taken_from"];
echo "
<div class="col-sm-3 disc-overview row-eq-height">
<div class="col-sm-12 text-center wow fadeInLeft">
<img alt="$title" src="/images/discography/$seo_link-1.jpg">
</div>
<h3 class="card-title">$title</h3>
<h4 class="card-subtitle">$date_released</h4>
<a href="/$type/$seo_link/" title="Show details of $title">
<button class="btn btn-card">MORE</button>
</a>
</div>";
}
}?>
</section>

.CSS：

#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;

Answer 1

你可以用javascript和jQuery解决方案来解决这个问题。 我过去曾使用过匹配高度库库，它的工作方式与您描述的完全一样。

库将查看行中的所有项目，并计算高度最大的项目。 之后，它会将该高度应用于行中的所有其他项目。 你会做类似的事情：

$('.row-eq-height').matchHeight();

但是，您也可以使用弹性框来解决此问题。 这样做的一个好处是它消除了对额外 JS 资产的需求。 一个缺点是并非每个浏览器都支持它。

您可以添加此 CSS：

#disc-overview {
display: flex;
}

还可以使用flex-wrap属性并将其设置为wrap以允许项排列到下一行。 下面是一个例子，它与 bootstrap 3.x 提供的内置img-responsive类结合使用效果很好。