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资产。一个缺点是每个浏览器都不支持它。

你会添加这个CSS：

#disc-overview {
  display: flex;
}

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

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

1 个答案: