*ngFor列表div设置hover负margin时每行末尾元素挤压下一行如何修复

问题根因 #

你使用的float: left浮动布局本身没有行隔离规则，且:hover状态用margin-top: -5px实现上移时，会改变该元素在文档流中的实际占位高度，导致同排高度出现5px的空隙，下一行的第一个浮动元素就会自动填补这个空隙，出现错位。

可行修复方案（推荐按优先级选择） #

方案1：改用Flex布局+transform实现上移（最优，无兼容问题，布局更稳定） #

1. 先调整HTML结构，给所有卡片加一个外层父容器，同时把*ngFor移到卡片元素上减少无用嵌套：

<div class="card-list">
  <div class="divcard" *ngFor="let del of item">
    <img class="cover" [src]="del.myimg" />
  </div>
</div>

2. 调整CSS样式：

/* 新增外层容器样式 */
.card-list {
  display: flex;
  flex-wrap: wrap;
  /* 保持和原设计一致的间距 */
  column-gap: 0.8%;
  row-gap: 10px; /* 可以按需调整行间距 */
}

.divcard {
  /* 一行4个，宽度计算后适配flex布局 */
  width: 24.4%;
  height: 420px;
  background-color: rgb(246, 246, 246);
  transition: all ease 0.5s;
}

.divcard:hover {
  /* 用transform实现上移，不会改变元素文档流占位，不影响其他元素布局 */
  transform: translateY(-5px);
}

方案2：不改动原有浮动布局，仅替换hover属性 #

如果不想调整布局结构，仅需要把hover里的margin-top: -5px替换为transform: translateY(-5px)即可解决问题：

.divcard:hover {
  /* margin-top: -5px; 替换为下面的代码 */
  transform: translateY(-5px);
}

transform是纯视觉层的变换，不会修改元素的实际盒模型占位，所以不会触发周边元素的布局重排，动画性能也比修改margin更高。

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