因标题行数差异，foreach循环元素margin-bottom无法对齐的解决咨询

我用foreach循环渲染了新闻卡片，但标题长度不一致，部分标题换行导致卡片布局不齐。给#news-title设置了margin-bottom:50px;后，所有元素的高度还是无法统一，请问如何修改CSS，让所有卡片不受标题长度影响保持一致布局？

渲染代码（PHP） #

foreach($results_n as $res_n){
    echo'<div class="col-md-4">
            <img src="" class="mb-3" alt="news banner">
            <p id="news-category">'.$res_f->category.'</p>
            <h2 id="news-title">'.$res_n->title.'</h2>
            <hr>
            <div class="row mt-1">
                    <div class="col-md-6">
                    <p id="news-date" class="float-left">'.$res_n->date.'</p>
                </div>
                <div class="col-md-6">
                    <p id="read-more">READ MORE</p>
                </div>
                </div>
         </div>'; }
             
    echo'</div>';

当前CSS代码 #

#news-title {
    font-weight: bold;
    font-size:15px;
    margin-bottom: 50px;
}

解决方法 #

方法1：固定标题高度+内容截断

如果能预估标题最多显示行数，给标题容器设置固定高度，同时添加溢出处理避免内容超出：

#news-title {
    font-weight: bold;
    font-size:15px;
    margin-bottom: 50px;
    height: 45px; /* 根据字体大小计算，15px字体两行约45px */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制最多显示2行 */
    -webkit-box-orient: vertical;
}

方法2：Flex布局让卡片自动填充高度

给每个卡片容器设置Flex布局，让标题区域自动占据剩余空间，把下方元素固定在底部：

.col-md-4 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#news-title {
    font-weight: bold;
    font-size:15px;
    margin-bottom: auto; /* 自动填充剩余空间，将下方元素挤到底部 */
}

/* 可选：统一分隔线和底部区域的间距 */
hr {
    margin: 15px 0;
}

重要修正：HTML重复ID问题

循环生成的元素使用了重复的id（如news-title、news-category），不符合HTML规范，会导致样式/JS冲突。建议改成class，比如class="news-title"，对应CSS选择器改为.news-title。

内容的提问来源于stack exchange，提问作者Hadrian Clayton