如何设置API内容展示样式，使足球运动员详情正确显示在对应头像下方

核心问题根源 #

当前渲染逻辑没有将单名球员的关联信息（头像、姓名、年龄）包裹在同一个独立布局单元内，而是将所有头像、所有姓名、所有年龄元素分批批量插入公共父容器，最终形成的DOM结构天然会出现元素独立堆叠、信息与头像不匹配的错位效果。 #

结构对比 #

错误渲染结构（当前出问题的写法） #

<div class="player-container">
  <img src="球员1头像链接">
  <img src="球员2头像链接">
  <img src="球员3头像链接">
  <p>球员1姓名</p>
  <p>球员2姓名</p>
  <p>球员3姓名</p>
  <span>球员1年龄</span>
  <span>球员2年龄</span>
  <span>球员3年龄</span>
</div>

这种结构下，所有头像会先沿流式方向排列，紧接着所有姓名、所有年龄再依次排列，完全不会和对应头像绑定在同一个区块内。

正确渲染结构 #

每一名球员的所有关联信息都被包裹在独立的卡片容器中，卡片内部垂直排布头像、姓名、年龄：

<div class="player-container">
  <!-- J.Butland 独立卡片 -->
  <div class="player-card">
    <img src="J.Butland头像链接" alt="J.Butland">
    <p class="player-name">J.Butland</p>
    <p class="player-age">28</p>
  </div>
  <!-- J.Pickford 独立卡片 -->
  <div class="player-card">
    <img src="J.Pickford头像链接" alt="J.Pickford">
    <p class="player-name">J.Pickford</p>
    <p class="player-age">27</p>
  </div>
</div>

具体修复步骤 #

• 调整JavaScript渲染逻辑：遍历接口返回的球员数组时，每轮循环只为当前正在处理的球员创建独立卡片容器，将该球员的头像、姓名、年龄全部追加到这个卡片内，再将完整卡片一次性插入父容器。禁止分批单独插入所有头像、再单独插入所有姓名、再单独插入所有年龄。
• 配套调整CSS布局，保证卡片内部内容垂直排布：

.player-container {
  /* 网格布局自动等距排列所有球员卡片 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px;
}
.player-card {
  /* 卡片内部垂直居中排列内容 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.player-card img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}

• 参考可直接复用的JS渲染逻辑示例：

// playerList为api-football-v1接口返回的球员数组
const playerContainer = document.querySelector('.player-container');
playerList.forEach(player => {
  // 创建单球员独立卡片
  const card = document.createElement('div');
  card.classList.add('player-card');
  // 组装当前球员的所有元素
  const avatar = document.createElement('img');
  avatar.src = player.photo;
  avatar.alt = player.name;
  const nameEl = document.createElement('p');
  nameEl.textContent = player.name;
  const ageEl = document.createElement('p');
  ageEl.textContent = player.age;
  // 将当前球员的所有元素绑定到对应卡片
  card.append(avatar, nameEl, ageEl);
  // 将完整卡片插入父容器
  playerContainer.append(card);
});

内容的提问来源于stack exchange，提问作者Aadil Hafesji