为何Migrated卡片的Icon2无法置于Info Div上方？

核心原因 #

虽然仅多了一个li元素，但该元素撑开了Info容器的高度，而Icon2的布局规则未设置为始终锚定容器顶部，导致内容挤压时Icon2被推至容器外部。

具体修复方案 #

方案1：绝对定位固定Icon2（最稳妥） #

给Info div设置相对定位，再给Icon2添加绝对定位规则：

.info-div {
  position: relative; /* 让子元素的绝对定位基于该容器 */
}
.icon2 {
  position: absolute;
  top: 8px; /* 按需调整顶部间距 */
  right: 8px; /* 按需调整左右位置，比如left:8px */
}

此方法不受容器内内容多少影响，Icon2会始终固定在容器顶部指定位置。

方案2：Flex布局强制顶部对齐 #

如果Info div使用Flex布局，调整对齐规则确保Icon2始终靠上：

.info-div {
  display: flex;
  flex-direction: column; /* 保持内容垂直排列 */
}
.icon2 {
  align-self: flex-end; /* 或flex-start，根据你的布局需求 */
  margin-top: 0; /* 清除默认margin避免偏移 */
}

同时检查Info div是否设置了overflow: hidden，如果有则移除，防止Icon2被容器裁切。

方案3：移除容器固定高度限制 #

若Info div设置了固定height，改为min-height让容器随内容自动撑开，同时设置顶部对齐：

.info-div {
  min-height: 150px; /* 替换为你的初始高度值 */
  display: flex;
  align-items: flex-start; /* 强制子元素顶部对齐 */
}

验证步骤 #

1. 修改后给Migrated卡片新增多个li元素，确认Icon2仍固定在顶部
2. 对比另外两个卡片的样式，确保布局一致性

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