如何让我的卡片在html/css/js中相邻？

要让卡片在HTML/CSS/JS中相邻显示，你需要使用CSS来控制卡片的布局。以下是一个简单的示例，展示了如何实现这一点：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card-container">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
    </div>
</body>
</html>

CSS (styles.css)

.card-container {
    display: flex;
    flex-wrap: wrap; /* 允许卡片换行 */
    gap: 16px; /* 卡片之间的间距 */
}

.card {
    flex: 1 1 calc(33.33% - 16px); /* 每个卡片占据1/3宽度，减去间距 */
    min-width: 300px; /* 最小宽度 */
    padding: 16px;
    box-sizing: border-box;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
}

解释

HTML结构：
- 使用一个div容器包裹所有的卡片，类名为card-container。
- 每个卡片也是一个div，类名为card。

CSS布局：
- .card-container使用display: flex来启用Flexbox布局。
- flex-wrap: wrap允许卡片在空间不足时换行。
- gap: 16px设置卡片之间的间距。
- .card使用flex: 1 1 calc(33.33% - 16px)来确保每个卡片占据大约1/3的宽度，并减去间距。
- min-width: 300px确保卡片在较小屏幕上也有足够的宽度。