php - 使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 解决方案来解决这个问题。我用过 Match Height library过去使用过这个库，它完全按照你描述的方式工作。

图书馆将查看行中的所有元素并计算高度最大的元素。之后，它将将该高度应用于该行中的所有其他元素。你会做类似这样的事情:

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

但是，您也可以使用 flexbox解决这个问题。这样做的一个好处是它消除了对额外 JS Assets 的需求。一个缺点是并非所有浏览器都支持它。

您将添加此 CSS:

#disc-overview {
  display: flex;
}

您还可以使用 flex-wrap 属性并将其设置为 wrap 以允许元素流到下一行。 Here is an example of that , 它与 bootstrap 3.x 提供的内置 img-responsive 类结合使用效果很好。