how to make the card stick to top-CodePudding

SS of webpage

html (ejs): see the part after <%- include("navbar.ejs") -%> inside body tag the ".cardholder" holds "anime-card" which are templates(card.ejs). The first and the last div inside ".cardholder" is same as card.ejs just has different content in h4 tag heading content to which caused distortion. please refer the image about to understand it better

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <title>ShinAshchi</title>
</head>

<body>
    <%- include("navbar.ejs") -%>
    <div >
        <div >
            <img  src="images/logo.png" alt="404" width="200px" height="200px">
            <div >
                <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 >
            <img  src="images/logo.png" alt="404" width="200px" height="200px">
            <div >
                <h4>Lorem ipsum dolor sit, amet consectetur</h4>
            </div>
        </div>

        
    </div>
</body>

</html>

card.ejs

<div >
    <img  src="images/logo.png" alt="404" width="200px" height="200px">
    <div >
        <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;
}

CodePudding user response：

Add vertical-align: top; to your cards, so they all aligned to the top of the row on which they are rendered.

.anime-card {
  vertical-align: top;
  /* other styles */
}

CodePudding user response：

try this:

.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; */
        margin-top: 0;
    }