求助：如何让动态生成的HTML产品每行显示3个？

首先注意你的HTML里父容器是id="product-featured-box"，但现有CSS用的是类选择器.product-featured-box，这会导致样式不生效，先把选择器修正为#product-featured-box。

接下来调整CSS实现每行3个产品：

#product-featured-box {
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  gap: 15px; /* 控制产品之间的间距，可自行调整 */
  justify-content: flex-start; /* 换行后左对齐，可选 */
}

.product-box {
  flex: 0 0 calc(33.333% - 10px); /* 固定宽度，减去gap的均分宽度，确保每行3个 */
  box-sizing: border-box; /* 确保padding和border不会撑宽元素 */
  /* 若需要内部纵向布局，可添加 flex-direction: column; */
}

说明：

• flex-wrap: wrap：让flex容器内的元素在一行放不下时自动换行，这是实现多行布局的核心。
• gap：直接设置元素间的横纵向间距，比用margin更简洁，不会出现最后一行多余的外侧间距。
• flex: 0 0 calc(33.333% - 10px)：0 0表示元素不会被拉伸或压缩，宽度固定为父容器的1/3减去部分间距（数值可根据你设置的gap大小调整）。
• box-sizing: border-box：避免元素的padding、border导致宽度超出预期，保证布局精准。

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