在自定义布局中发布？

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。

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

删除clearfix类。

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

remove clearfix classes