如何解决排行榜上这种意外的图像定位？

Question

下面的代码创建一个排行榜，将用户从1到10进行排名，结果如下：

现在的问题是：如何摆脱第10位的右偏。

我认为这是因为10比其他数字宽...并且如果我想创建更多的排名（也许是46个或更多），问题似乎更加烦人。

注意：我不想减小字体大小。

代码如下：

JS

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.job = "Doctor";
profile1.points = 1500;
profile1.level = 15;
profile1.img = "https://randomuser.me/api/portraits/men/12.jpg";
profile1.imgDiamonds = "Diamonds.png";
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane tanha";
profile2.job = "Dentist";
profile2.points = 2000;
profile2.level = 1;
profile2.img = "https://randomuser.me/api/portraits/women/22.jpg";
profile2.imgDiamonds = "Diamonds.png";
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.job = "Medic";
profile3.points = 4000;
profile3.level = 5;
profile3.img = "https://randomuser.me/api/portraits/men/22.jpg";
profile3.imgDiamonds = "Diamonds.png";
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.job = "Agriculture";
profile4.points = 1900;
profile4.level = 55;
profile4.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile4.imgDiamonds = "Diamonds.png";
profiles.push(profile4);

let profile5 = {};
profile5.name = "Sally Peterson";
profile5.job = "Pumper";
profile5.points = 1100;
profile5.level = 4;
profile5.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile5.imgDiamonds = "Diamonds.png";
profiles.push(profile5);

let profile6 = {};
profile6.name = "Sally Peterson";
profile6.job = "Mother";
profile6.points = 1400;
profile6.level = 85;
profile6.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile6.imgDiamonds = "Diamonds.png";
profiles.push(profile6);

let profile7 = {};
profile7.name = "Sally Peterson";
profile7.job = "Nurse";
profile7.points = 1400;
profile7.level = 11;
profile7.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile7.imgDiamonds = "Diamonds.png";
profiles.push(profile7);

let profile8 = {};
profile8.name = "Sally Peterson";
profile8.job = "Taxi Diver";
profile8.points = 1400;
profile8.level = 17;
profile8.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile8.imgDiamonds = "Diamonds.png";
profiles.push(profile8);

let profile9 = {};
profile9.name = "Sally Peterson";
profile9.job = "High School Student";
profile9.points = 1400;
profile9.level = 37;
profile9.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile9.imgDiamonds = "Diamonds.png";
profiles.push(profile9);

let profile10 = {};
profile10.name = "Sally Peterson";
profile10.job = "Student";
profile10.points = 1500;
profile10.level = 14;
profile10.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile10.imgDiamonds = "Diamonds.png";
profiles.push(profile10);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) {
  return b.points - a.points;
})


let count = 1;
profiles.forEach(function(entry) {
  let profilesDiv = document.getElementsByClassName('profiles')[Math.floor((count - 1) / 5)];

  let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.img;

  let imgDiamonds = document.createElement('img');
  imgDiamonds.className = "profileDia";
  imgDiamonds.src = entry.imgDiamonds;


  let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>" + entry.name + "</div>";


  let job = document.createElement('span');
  job.className = "job";
  job.textContent = entry.job;
  profile.appendChild(job);
  profile.prepend(img);
  profile.prepend(imgDiamonds);


  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  profile.prepend(imgDiamonds);

  let level = document.createElement('span');
  level.className = "level";
  level.textContent = entry.level;
  profile.appendChild(level);
  profile.prepend(img);
  profile.prepend(imgDiamonds);

  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
  profilesDiv.appendChild(profile);
  count++;

});

.row {
  display: flex;
}

.column {
  flex: 50%;
}

.profile {
  padding: 10px;
  margin: 100px 70px 0px 0px;
  width: 50%;
  height: 60px;
  box-sizing: border-box;
}

.profile .name {
  margin-right: -210px;
  float: right;
  width: 200px;
  height: 50px;
}

.profile .job {
  margin-right: -210px;
  margin-top: 25px;
  float: right;
  width: 200px;
  height: 50px;
}

.profile .count {
  float: left;
  margin-right: 5px;
  font-family: "Helvetica Neue";
  font-weight: 200;
  src: url(helveticaneue-ultrathin.woff);
  color: #E6E0EC;
  font-size: 55px;
}

.profile img.profilePic {
  position: absolute;
  margin: -50px 70px 50px 90px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 4px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.profile img.profileDia {
  position: absolute;
  margin: -10px 70px 50px 520px;
  width: 2%;
  height: auto;
}

.points {
  position: absolute;
  margin: 0px 100px 100px 450px;
  float: right;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #008CBA;
}

.level {
  position: absolute;
  margin: 35px 100px 100px 230px;
  float: right;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #ed0909;
  font-size: 20px;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  -moz-border-radius: 30px;
  /* or 50% */
  border-radius: 30px;
  /* or 50% */
  background-color: black;
  color: white;
  text-align: center;
  font-size: 1.5em;
}

<div class="row">
  <div class="column">
    <div class="profiles"></div>
  </div>
  <div class="column">
    <div class="profiles"></div>
  </div>
</div>

Answer 1

一种方法是在width: 76px;容器上设置.profile .count。

唯一的缺点是，如果您的数字需要输入3位数字，则需要增加此数字。

如果上述方法对您不起作用，并且您需要宽度是动态的，那么您将重新编码该列以使用基于表格的布局。

如果表格布局也不可行，则可以使用javascript获取最大的＃容器的宽度并将其应用于所有其他容器。

const placeDivs = document.querySelectorAll('.count');
const largestDivWidth = getLargestWidth(placeDivs);

function getLargestWidth(elements) {
  let largestNumber = 0;
  elements.forEach(element => {
    const elementWidth = element.clientWidth;
    if (elementWidth > largestNumber) largestNumber = elementWidth;
  });
  return largestNumber;
}

placeDivs.forEach(element => element.style.width = largestDivWidth);