Javascript 如何为我的排行榜创建两列？

这是排行榜代码。我有10名球员根据他们的分数从1到10进行排名

现在的问题是如何将玩家分为两列？ （每列将包含5名玩家）

现在有一列包含了所有10名玩家

我正在学习网络开发，任何解决方案都会被考虑

谢谢

代码如下：

//这是将保存所有概要文件对象的数组
设profiles=[]；
让profile1={}；
profile1.name=“吉姆•鲍勃”；
轮廓1.点=1500；
profile1.img=”https://randomuser.me/api/portraits/men/12.jpg"
profiles.push（profile1）；
设profile2={}；
profile2.name=“Jane tanha”；
2.2分=2000分；
profile2.img=”https://randomuser.me/api/portraits/women/22.jpg"
profiles.push（profile2）；
设profile3={}；
profile3.name=“迈克·琼斯”；
profile3.0点=4000；
profile3.img=”https://randomuser.me/api/portraits/men/22.jpg"
profiles.push（profile3）；
设profile4={}；
profile4.name=“萨利·彼得森”；
profile4.0点=1900；
profile4.img=”https://randomuser.me/api/portraits/women/24.jpg"
profiles.push（profile4）；
设profile5={}；
profile5.name=“萨利·彼得森”；
剖面图5.点=1100；
profile5.img=”https://randomuser.me/api/portraits/women/24.jpg"
profiles.push（profile5）；
设profile6={}；
profile6.name=“萨利·彼得森”；
profile6.0点=1400；
profile6.img=”https://randomuser.me/api/portraits/women/24.jpg"
profiles.push（profile6）；
设profile7={}；
profile7.name=“萨利·彼得森”；
profile7.7点=1400；
profile7.img=”https://randomuser.me/api/portraits/women/24.jpg"
profiles.push（profile7）；
设profile8={}；
profile8.name=“萨利·彼得森”；
剖面图8.8点=1400；
profile8.img=”https://randomuser.me/api/portraits/women/24.jpg"
profiles.push（profile8）；
设profile9={}；
profile9.name=“萨利·彼得森”；
剖面图9.9点=1400；
profile9.img=”https://randomuser.me/api/portraits/women/24.jpg"
profiles.push（profile9）；
让profile10={}；
profile10.name=“萨利·彼得森”；
轮廓10.0点=1500；
profile10.img=”https://randomuser.me/api/portraits/women/24.jpg"
profiles.push（profile10）；
//按点对数组排序
//b-a会先升到最高点，交换它们使a-b先升到最低点
配置文件.排序（函数（a，b）{
返回b点-a点；
})
让profilesDiv=document.getElementsByClassName（'profiles'）[0]；
让计数=1；
profiles.forEach（函数（条目）{
设img=document.createElement（'img'）；
img.className=“profilePic”；
img.src=entry.img；
让profile=document.createElement（'div'）；
profile.className=“profile”；
profile.innerHTML=“”+entry.name+”；
设points=document.createElement（'span'）；
points.className=“points”；
points.textContent=entry.points；
配置文件。追加子项（点数）；
配置文件。预结束（img）；
var span=document.createElement（“span”）；
span.textContent=计数+'；
span.className=“计数”；
剖面预弯（span）；
档案iv.附录子项（档案）；
计数++；
});
.profile{
填充：10px；
利润率：100px 70px 0px 0px；
宽度：50%；
高度：40px；
框大小：边框框；
}
.profile.name{
右边距：200px；
浮动：对；
宽度：230px；
高度：50px；
}
.profile.count{
浮动：左；
右边距：5px；
字体系列：“Helvetica Neue”；
字号：800；
src:url（helveticaneue ultrathin.woff）；
颜色：#b6cdea；
字体大小：45px；
}
.个人资料{
位置：绝对位置；
余量：-50px 70px 50px 90px；
背景：#2f293d；
边框：1px实心#2p293d；
填充：4px；
边界半径：50%；
长方体阴影：.2rem.2rem 1rem rgba（0,0,0,5）；
}
.要点{
位置：绝对位置；
利润率：0px 100px 100px 450px；
浮动：对；
字体系列：“Helvetica Neue”；
字号：800；
src:url（helveticaneue ultrathin.woff）；
颜色：#008CBA；
}

做专栏

.row{
显示器：flex；
}
.栏目{
弹性：50%；
}

A.
B
感谢zmag的编辑。。。那会有帮助的…是的。。。这是可行的，但我不知道第10级右倾的原因是什么？你能看到吗……因为
10
比
1-9
中的其他数字宽。同样的事情也发生在代码中。你可以用css来修复它。所以唯一的方法是减少count的字体大小？你可以在profile中为每个元素创建列