自定义布局中的问题？答案

【问题标题】：Issue in a custom layout?自定义布局中的问题？
【发布时间】：2019-04-29 05:55:45
【问题描述】：

我在网站上创建了一个新闻部分。每行包含 4 张新闻卡片。不知何故，它的行为不应该如此。那你能帮我解决这个问题吗？

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

我无法分享代码。请检查。

【问题讨论】：

<div class="clearfix"></div> 为什么这些在 dom 中？他们打破了流程
你需要使用'.news-boxes div[class^="col-"], div[class*=" col-"]{min-height: 490px;}'或者去掉

Something on my website doesn't work, can I just paste a link to it? - 不，请您创建一个minimal reproducible example 在问题中展示您的问题。另外它的行为不应该并不能真正解释问题是什么

不清楚你遇到的问题，不清楚你在问什么，建议阅读stackoverflow.com/help/how-to-ask

“我无法分享代码。” - 那么你的问题首先不属于这里。查看您过去的问题，这似乎是您的一般 MO - 链接到某个站点，没有代码。请在您未来的问题上以不同的方式处理。这应该是一个问答网站，但如果未来的读者甚至在您提到的网站上都找不到您描述的情况（因为您同时解决了这个问题），那么这个问题很可能会是对他们一文不值。

标签： html css web layout grid

【解决方案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;
}

【讨论】：

【解决方案2】：

使用 clearfix 类删除 div 并为元素添加固定高度

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

【讨论】：

【解决方案3】：

出现此问题是因为您的新闻卡片的高度不同。您可以为 news-post-container 类添加 min-height。

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

删除 clearfix 类。

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

remove clearfix classes

【讨论】：