如何实现卡片置顶？附网页卡片错位问题及相关代码

首尾的.anime-card组件与card.ejs模板结构完全一致，但因h4标题内容长度不同，导致卡片高度不一致，使用inline-block排列时出现布局错位。

HTML (EJS) 代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <title>ShinAshchi</title>
</head>

<body>
    <%- include("navbar.ejs") -%>
    <div class="card-holder">
        <div class="anime-card">
            <img class="anime-card-img" src="images/logo.png" alt="404" width="200px" height="200px">
            <div class="anime-heading">
                <h4>Lorem ipsum dolor sit, amet consectetur</h4>
            </div>
        </div>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <div class="anime-card">
            <img class="anime-card-img" src="images/logo.png" alt="404" width="200px" height="200px">
            <div class="anime-heading">
                <h4>Lorem ipsum dolor sit, amet consectetur</h4>
            </div>
        </div>
    </div>
</body>

</html>

card.ejs 代码 #

<div class="anime-card">
    <img class="anime-card-img" src="images/logo.png" alt="404" width="200px" height="200px">
    <div class="anime-heading">
        <h4>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, aspernatur accusantium!</h4>
    </div>
</div>

style.css 代码 #

body{
    line-height: normal;
}
.card-holder
{
    background-color: antiquewhite;
    padding: 20px;
    margin: 20px;
    /* align-items: center; */
}
.anime-card{
    /* display: flex; */
    /* position: initial; */
    display: inline-block;
    width: 309.800px;
    /* height: 348.8px; */
    height: fit-content;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 20px;
    background-color:#00FFFF;
    background-image: url("/images/2.jfif");
    /* background-repeat: no-repeat; */
    
}

.anime-card-img{
    /* display:block; */
    padding-top: 1rem;
    width: 100%;
    
}
.anime-heading{
    margin-top: 10px;
    min-height: 100.800px;
    display: inline-block;
    width: auto;
}

解决办法 #

1. 统一卡片高度 #

给.anime-card设置固定高度，替代自适应高度：

.anime-card{
    /* 保留原有其他样式 */
    height: 348.8px; /* 取消注释原固定高度值 */
    /* height: fit-content; 注释掉此行 */
}

所有卡片高度一致，彻底避免因内容长度差异导致的错位。

2. 顶部垂直对齐 #

给.anime-card添加垂直对齐属性，保留自适应高度但顶部对齐：

.anime-card{
    /* 保留原有其他样式 */
    vertical-align: top;
}

这种方式不强制统一高度，仅让所有卡片顶部对齐，视觉上消除错位感。

3. 改用Flexbox布局（推荐） #

将.card-holder改为Flex容器，用现代布局方式自动处理排列：

.card-holder{
    /* 保留原有其他样式 */
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 替代margin-left和margin-bottom，布局更整洁 */
}
.anime-card{
    margin-left: 0; /* 移除原有左侧边距 */
    margin-bottom: 0; /* 移除原有底部边距 */
}

Flex布局能自动处理卡片的换行和对齐，不会出现错位问题，同时代码更简洁易维护。

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