如何实现卡片（card）内部的两个div元素并排显示

问题表现 #

使用Grid布局实现个人资料卡片时出现元素错位问题，实际输出效果和预期存在偏差：

• 实际输出效果：
• 预期实现效果：
• 当前相关代码：

核心问题原因 #

没有做层级拆分，所有元素直接在最外层Grid容器中排列，导致Grid自动按单元格分配位置，出现错乱。

具体修复方案 #

第一步：调整最外层Grid配置 #

给卡片最外层容器设置如下CSS属性，直接拆分左右两栏：

.profile-card {
  display: grid;
  /* 左侧固定宽度放头像，右侧占剩余所有宽度 */
  grid-template-columns: 120px 1fr;
  /* 两栏之间的间距，可按需调整 */
  column-gap: 20px;
  padding: 24px;
  /* 垂直对齐头像和右侧内容 */
  align-items: center;
  border-radius: 16px;
  /* 其他你需要的卡片基础样式 */
}

第二步：拆分右侧内容层级 #

把姓名、职位、统计数据全部包裹在一个独立的内容容器中，给这个容器设置垂直布局：

.profile-content {
  display: grid;
  /* 上下两块高度自适应内容 */
  grid-template-rows: auto auto;
  row-gap: 16px;
}

第三步：设置统计数据行布局 #

统计数据部分单独用Grid做三等分排列：

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

配套HTML结构参考 #

<div class="profile-card">
  <!-- 左侧头像区域 -->
  <img class="avatar" src="你的头像地址" alt="用户头像">
  <!-- 右侧内容区域 -->
  <div class="profile-content">
    <div class="user-base">
      <h3>李小明</h3>
      <p>前端开发工程师</p>
    </div>
    <div class="profile-stats">
      <div class="stat-item">
        <p class="stat-num">213</p>
        <p class="stat-label">关注</p>
      </div>
      <div class="stat-item">
        <p class="stat-num">1.2k</p>
        <p class="stat-label">粉丝</p>
      </div>
      <div class="stat-item">
        <p class="stat-num">37</p>
        <p class="stat-label">作品</p>
      </div>
    </div>
  </div>
</div>

按上述代码调整后即可实现预期的布局效果。

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