Flexbox柱，同一行受力元件異常

Question

我的頁面在收到來自 API 的值時會生成項目卡。 這是生成卡片的代碼。

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

這是我的 CSS：

.card {
    display: flex;
    background-color: rgb(148, 148, 150);
    width: 250px;
    height: 350px;
    border-radius: 15px;
    padding: 0px 10px;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: white;
    font-family: 'Poppins', Arial;
    font-size: 20px;
    margin: 15px 10px;
    text-align: center;
}

我想在 item.finalPrice 之后擁有該圖像。 現在它強制它到下一行，因為 card 有 flex-direction: column; 應用於它。 有沒有辦法在價格之后強制那個小圖標？ 您可以在此處查看網站： https://davidlegartt.github.io/FortniteTracker/

Answer 1

這是 HTML 將那個小圖標放在價格后面。

<div class="row"><span>1200 <img src="https://fortnite-api.com/images/vbuck.png" height="20px"></span></div>

或者

<div class="card"> ' + item.items[0].name + ' <br> <div class="row"><span>' + item.finalPrice + '<img src="https://fortnite-api.com/images/vbuck.png" height="28px">' + '</span></div> <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>'

請參閱屏幕截圖。