我让Ai写的感觉有点太繁琐了
/* ---启用勋章用，个人页面金币显示错位修复--- /
/ 设置父容器为弹性布局 /
.UserCard-info {
display: flex;
flex-wrap: wrap;
gap: 10px; / 设置元素间距 */
}
/* 设置统计信息项的共同样式和顺序 /
.UserCard-info .item-lastSeen,
.UserCard-info .item-joined,
.UserCard-info .item-uid,
.UserCard-info .item-best-answer-count,
.UserCard-info .item-followers,
.UserCard-info .item-money {
flex: 0 0 auto; / 防止项目被拉伸 /
order: 1; / 所有统计信息放在第一行 */
}
/* 单独设置money的位置在followers后面 */
.UserCard-info .item-followers {
order: 1;
}
.UserCard-info .item-money {
order: 2;
}
/* badges放在第二行 /
.UserCard-info .item-badges {
order: 3;
flex-basis: 100%; / 强制占据整行 /
margin-top: 5px; / 与上面的元素保持一定间距 */
}
/* bio放在第三行 /
.UserCard-info .item-bio {
order: 4;
flex-basis: 100%; / 强制占据整行 /
margin-top: 5px; / 与上面的元素保持一定间距 */
}
/* 确保统计信息一行显示，不会换行 */
.UserCard-info > :not(.item-badges):not(.item-bio) {
white-space: nowrap;
}
