如何用JavaScript实现RecipeCard元素横向排列而非垂直排列？

云原生阿岚

2026-7-27

解决动态生成RecipeCard元素横向排列的问题

核心原因&解决方向

你遇到的问题本质是动态生成的RecipeCard元素默认是块级元素，会独占整行。不用改动态调用类属性的逻辑，只要给容器和卡片元素加对CSS布局规则就行。

具体操作步骤

1. 给卡片容器加Flex布局

先找你用来挂载所有RecipeCard的容器（比如页面里的<div id="recipe-container"></div>），给它加以下CSS：

#recipe-container {
  display: flex;
  flex-wrap: wrap; /* 卡片太多时自动换行 */
  gap: 1.5rem; /* 卡片之间留间距，可选 */
}

要是你用Bootstrap的row类，直接给容器加row类就行，但记得后续给卡片加对应的列类。

2. 调整单个RecipeCard的样式

让每个卡片不要占满整行，给RecipeCard生成的根元素（比如带recipe-card类的div）加样式：

.recipe-card {
  /* 固定宽度，比如每行放3个就设300px左右 */
  width: 300px;
  /* 或者用flex属性自适应，每行最多3个 */
  /* flex: 1 1 30%; */
  /* 加个最小宽度防止缩得太窄 */
  min-width: 250px;
}

如果用Bootstrap，给每个卡片元素加col-md-4类（表示中等屏幕以上每行3个），这样不用自己写宽度。

3. 确保卡片挂载到容器里

在你的script.js里，别把卡片直接加到body，要加到刚才的容器里，比如：

const container = document.getElementById('recipe-container');
// 遍历data生成卡片
recipes.forEach(recipe => {
  const card = new RecipeCard(recipe);
  container.appendChild(card.element);
});