如何实现MySQL动态加载的网站卡片Div完美对齐？

我正在制作一个展示各类事实内容的网站，为每个事实内容制作了包含图片、标题和事实文本的卡片。这些卡片从MySQL服务器自动加载展示，但目前呈现出对齐混乱的状态，我希望能实现卡片的完美对齐。

卡片未对齐示例：

相关代码 #

index.js #

app.get('/', (req, res) => {
    connection.query('SELECT * FROM facts WHERE 1', function (error, results, fields) {
        if (error) throw error;
        console.log(results.length) 
        var html = '';  
        for (var i = 0; i < results.length; i++) {  
            html+=`
            <div class="special">
            <img src="http://localhost:3000/thumbnails/${results[i].image}">
            <h2>${results[i].title}</h2>
            <p>${results[i].fact}</p>
            </div>
            `;
        }
        

        res.render(__dirname + '/views/index.ejs', {results: html})
    })

})

index.ejs #

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('components/head.ejs') %>
</head>
<body>
    <%- include('components/menu.ejs') %>
    <div style="margin-left:15%;padding:1px 16px;height:1000px;">
        <h1>Welcome everyone</h1>
        <div class="container">
            <%- results %>
        </div>
    </div>
    
</body>
</html>

CSS #

@font-face {
    font-family: 'Longreach';
    src: url('Longreach.otf');
}

@font-face {
    font-family: 'Gemstone';
    src: url('Gemstone.ttf');
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto.ttf');
}

h1 {
    font-family: 'Gemstone';
    -webkit-text-stroke: 1px rgb(0, 0, 0);
    color: white;
    font-size: 60px;
}

p {
    font-size: 20px;
}

* {
    font-family: Roboto, Helvetica, sans-serif;
}

body {
    background-color: rgb(232, 232, 232);
    margin: 0;

}

.container .special {
    display: inline-block !important;
}

.special {
    display: inline-block !important;
    height: 500px;
    width: 400px;
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
    text-align: center;
    margin-left: 5%;
}

.special img {
    width: 100%;
    height: 50%;
    padding: 0 !important;
    margin: 0 !important;
}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}
  
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
  
li a.active {
    background-color: #04AA6D;
    color: white;
}
  
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

menu.ejs（组件） #

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/admin">Editor login</a></li>
</ul>

解决方案 #

卡片对齐混乱的核心原因是inline-block布局会受元素间空白字符、内容高度差异影响，改用Flexbox或Grid布局可彻底解决问题：

方法一：Flexbox布局（灵活适配） #

修改CSS中的.container和.special样式：

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 替代margin，实现均匀间距 */
    padding: 10px;
}

/* 移除重复的inline-block设置 */
.special {
    height: 500px;
    width: 400px;
    border: 1px solid black;
    padding: 5px;
    text-align: center;
    flex-shrink: 0; /* 防止卡片被压缩 */
}

方法二：Grid布局（规整网格） #

适合需要固定列数的场景，修改.container样式：

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* 自动适配屏幕宽度生成列 */
    gap: 15px;
    padding: 10px;
}

/* 移除inline-block设置 */
.special {
    height: 500px;
    border: 1px solid black;
    padding: 5px;
    text-align: center;
}

额外优化：防止内容溢出 #

如果标题或文本过长撑高卡片，添加以下样式：

.special h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制标题显示2行 */
    -webkit-box-orient: vertical;
    margin: 10px 0;
}

.special p {
    overflow-y: auto; /* 文本过长时显示滚动条 */
    height: calc(50% - 60px); /* 根据图片和标题高度计算剩余空间 */
}

可选：优化后端渲染逻辑 #

当前后端拼接HTML的方式不利于维护，推荐直接传递数据数组给EJS模板循环渲染：
修改index.js：

app.get('/', (req, res) => {
    connection.query('SELECT * FROM facts WHERE 1', function (error, results, fields) {
        if (error) throw error;
        console.log(results.length);
        res.render(__dirname + '/views/index.ejs', { facts: results });
    });
});

修改index.ejs的容器部分：

<div class="container">
    <% facts.forEach(fact => { %>
        <div class="special">
            <img src="http://localhost:3000/thumbnails/<%= fact.image %>">
            <h2><%= fact.title %></h2>
            <p><%= fact.fact %></p>
        </div>
    <% }) %>
</div>

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