在自定义布局中出现问题？

Question

我在网站上创建了一个新闻版块。每行包含4张新闻卡。不知何故，它的行为不正常。因此，您能帮我解决这个问题吗？

网站链接：http://www.shmgroup.com/news.php

我无法共享代码。请检查一下。

Answer 1

问题在于图像和文本内容的高度不同。我已使用以下CSS更改更新了站点。 *为图像增加了固定的高度，而不是宽度，并将其居中对齐。 *在文字说明中添加了3行剪切，并增加了最小高度。

.news-thumbnail img {
    max-width: 100%;
    height: 200px;
    display: inline;
}

.news-thumbnail {
    margin: 10px;
    text-align: center;
}
.news-excert p {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 60px;
}

Answer 2

使用clearfix类删除div并将修订高度添加到元素

.news-post-container {
    min-height: 500px; // example
}

Answer 3

出现此问题是因为您的新闻卡不在同一高度。您可以为“新闻发布后容器”类添加最低高度。

.news-post-container {
    min-height: 450px;
}

删除clearfix类。

希望现在新闻页面将正常工作。

remove clearfix classes