如何防止动态布局中的阻塞跳起来

Question

我需要修改layout的行为，当更改前一个块的高度时也会改变下一个块的位置。

在我的例子中，红色区块（.jumper）在第二排的第一个元素是＆＃34;悬停＆＃34;时跳起来。但我需要红色挡块才能站在它的位置上。就像在this case中，在第二行添加了一个元素。

怎么做？

为什么在第二种情况下容器的高度（main）尚未改变？

Answer 1

这是因为在悬停时你增加了-20％的保证金。如果你想拥有相同的东西，那么要么添加另一张图片，在文本div上添加20％的边距或最佳解决方案：

使用相同的值

将悬停中的margin: 0 0 20% 0更改为padding

Answer 2

啊，发现了！ ：）

只需对您的代码进行以下更改：

.zaglushka table {
  position: absolute;
  top: 100%;
  display: none;
}

.zaglushka:hover {
  z-index: 10;
  transform: scale(1.2);
}

我知道导致内容置换的scale转换有些奇怪，这是因为显示/隐藏了表格。

我认为这个解决方案应该这样做。