[英]Flexbox column, force elements on same line exceptionally
My page generates item cards when it receives value from API.我的页面在收到来自 API 的值时会生成项目卡。 This is the code which generates card.
这是生成卡片的代码。
$('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>');
Here is my CSS:这是我的 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;
}
I'd like to have that image right after item.finalPrice.我想在 item.finalPrice 之后拥有该图像。 Right now it forces it to next line since card has flex-direction: column;
现在它强制它到下一行,因为 card 有 flex-direction: column; applied to it.
应用于它。 Is there a way to force that small icon right after price?
有没有办法在价格之后强制那个小图标? You can see website here: https://davidlegartt.github.io/FortniteTracker/
您可以在此处查看网站: https://davidlegartt.github.io/FortniteTracker/
Here is the HTML to put that small icon just right after the price.这是 HTML 将那个小图标放在价格后面。
<div class="row"><span>1200 <img src="https://fortnite-api.com/images/vbuck.png" height="20px"></span></div>
or或者
<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>'
See the screenshot.请参阅屏幕截图。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.