Html CSS3过渡到不影响其他元素？

是否可能具有不影响附近图元位置的高度过渡

这种特殊情况涉及带float:left的div

演示：

---

我希望悬停转换位于您可以看到移动的元素的顶部。

我担心在您正在遵循的当前布局逻辑中，这将很难修复

为什么?？因为与第一行中的

浮动

相邻对齐一样，当上行中的一个框在

：hover

上展开时，下行中的

浮动

也将相对于该框重新定位

以下是我如何实现您的想法：

• 不要使用

  float

  ing，使用类似

  display:inline块的东西

• 您的语义

  文章

  包装在使用

  内联块时会导致问题。要么摆脱它们（哦，可能不利于搜索引擎优化），要么确保你不依赖于
  overflow:hidden设置“框”样式时

---

对不起，我帮不上忙了

给出集装箱箱的相对定位和飞出细节箱的绝对定位。由于绝对定位元素已从布局中删除，因此不会干扰浮动

---

演示：

您可以使用

position

属性而不是

float

属性，您可以执行以下操作：

#idname {
   position:fixed;
   margin-right:100px;
   margin-left:100px;
   margin-top:100px;
   margin-bottom:100px; /* I had written 100px only for example you can adjust it according to your screen */
}

#idname:hover {
   -moz-transtion: /* adjust the setting here for Firefox */;
   -webkit-transition: /* adjust the setting here for chrome and safari */;
   -o-transition: /* adjust the setting here for Opera */;
}

---

这将允许移动

div

，其位置将固定。

您可以通过使用在变换上使用转换。转换将更改元素而不影响布局。您可能想使用

transform:scaleY（）

来表示您想将某物的高度增加一倍：

transform: scaleY(2);
-webkit-transform: scaleY(2);
-moz-transform: scaleY(2);
-o-transform: scaleY(2);

---

您可以使用

position:absolute

而不是

position:fixed

，这样，当您打开web developer tools时，div不会移动

将

放在正确的位置。 保持外部的位置：固定，内部的位置：绝对

或者另一种方法是固定外部的最大高度

，内部的

应保持最大转换高度等于外部的高度。这将有助于避免其他

在交易中受到影响

或者另一种方式是，使用块来显示内容，而不是使用浮点方式

您可以发布一个minimal（）演示或类似的内容吗？这样我们就更容易调整CSS来解决您的问题，而不必自己重新创建演示？