段落长短变化时卡片图标位置偏移，relative/absolute定位失效求助

卡片内文本长度不一导致图标位置偏移，试试这几种靠谱方案：

• Flex布局方案：用弹性布局让文本区域占满卡片剩余空间，图标固定在指定位置，无需复杂定位。示例代码：

.card {
  display: flex;
  align-items: flex-start;
  gap: 12px; /* 文本与图标间的间距 */
}
.card-text {
  flex: 1; /* 强制文本区域填充卡片横向剩余空间 */
}
.card-icon {
  align-self: flex-end; /* 把图标固定在卡片底部，可按需改为flex-start/center */
}

• Grid布局方案：通过网格布局划分文本和图标区域，精准控制对齐方式。示例代码：

.card {
  display: grid;
  grid-template-columns: 1fr auto; /* 文本占满宽度，图标自适应 */
  align-items: end; /* 图标对齐底部，按需调整 */
  gap: 12px;
}

• 定位修正方案：如果坚持用定位，要确保父容器设置padding-bottom避免遮挡，同时准确定位图标。示例代码：

.card {
  position: relative;
  padding-bottom: 35px; /* 留出图标及间距的空间 */
}
.card-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

之前的定位方案失效，大概率是没给父容器预留足够内边距，或者定位坐标设置错误。

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