如何处理 div 长度的动态增长答案

【问题标题】：How to handle the dynamic growth in length of divs如何处理 div 长度的动态增长
【发布时间】：2018-11-28 08:19:43
【问题描述】：

我正在循环浏览一系列产品。我在另一个旁边显示一个，但有些产品的名称中的字符比其他产品多。所以结果是一些'product blocks' 高于其他块。我想为所有人保持相同的高度。

这是我的问题的图片：

这是我的代码：

foreach ($random_products as $random_product) {

    $product_image = unserialize($random_product['images']);

    echo '<div class="item">';
    echo '<img src="'.$product_image[0].'" alt="'.$random_product['name'].'" title="'.$random_product['name'].'">';

    echo '<p>'.$random_product['name'].'</p>';

    if($random_product['on_special'] == '1'){
        echo '<p>From R'.$random_product['special_price'].'</p><br>';
    } else {
        echo '<p>From R'.$random_product['price'].'</p><br>';
    }

    echo '<a href="#" class="btn btn-primary pop-prod-btn">View Product</a>';
    echo '</div>';
}

【问题讨论】：

这里你需要给一个固定的高度来保持所有的高度相同，或者你可以对文本字符串应用一个限制。
在 CSS 中试试这个：.item{ heigth: 5rem; } // for example
感谢您的回答。我应该在类项目中添加一个最小高度、最大高度和高度自动吗？
lottejackson.com/learning/an-equal-height-grid-using-flexbox

标签： html css loops

【解决方案1】：

使用以下代码示例来解决此问题：

PHP/HTML：

echo '<div class="prdt-title"> <p>'.$random_product['name'].'</p> </div>';

CSS：

.prdt-title{
    min-height: 40px;
    max-height:40px;
    overflow: hidden;  
    white-space: nowrap; 
    text-overflow: ellipsis;
}
.prdt-title p{
    overflow: hidden;  
    white-space: nowrap; 
    text-overflow: ellipsis;
}

这将使盒子中所有项目的盒子高度保持固定，并隐藏将从盒子溢出的额外字符。

【讨论】：