Flexbox column布局下如何让指定元素强制保持同一行显示

你当前遇到的问题本质是 .card 设置了 flex-direction: column 后，所有直接子元素都会作为独立的flex项垂直排列，价格文本和V币图标是两个独立的直接子元素，所以会强制换行。

最简单的修复方案是把价格和V币图标包裹在同一个行内容器中，让二者作为一个整体参与flex垂直排列，内部自然保持同行：

1. 修改卡片生成的JS代码：

$('body > #cards_daily').append('<div class="card"> ' + item.items[0].name + ' <br> ' + '<span class="price-wrap">' + item.finalPrice + '<img src="https://fortnite-api.com/images/vbuck.png" height="28px"></span>' + ' <br> ' + '<img class="card-image" src="' + item.items[0].images.icon + '"></img>' + '</div>');

2. 可选补充CSS调整对齐和间距：

.price-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* 可自定义调整价格和图标之间的间距 */
}

额外提示：你当前代码中所有卡片的道具图片都使用了同一个id="image"，id属性在单页面中必须唯一，建议改为class属性避免后续功能异常。

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