5

是否可以进行不影响附近元素位置的高度过渡？

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

演示： http ://ashleystewart.me/

我希望悬停过渡位于您可以看到四处移动的元素之上。

4

6 回答 6

2

给容器框相对定位和弹出细节框绝对定位。由于绝对定位元素已从布局中删除，因此不会干扰浮动。

演示：http ://dabblet.com/gist/3729269

于 2012-09-15T18:51:56.333 回答
1

恐怕在您遵循的当前布局逻辑中，很难修复。

为什么？因为就像您floats在第一行中彼此相邻对齐一样，当上行中的框在 上展开时:hover，float底行中的 s 也将相对于该框重新定位。

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

  • 不要使用floating，使用类似display: inline-block;.
  • 您的语义article包装器在使用inline-block;. 要么摆脱它们（哎呀，可能对 SEO 不友好），或者确保你overflow: hidden; 在设计“盒子”时不依赖它们。

对不起，我不能提供更多帮助！

于 2012-09-15T15:04:46.460 回答
0

您可以使用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并且其位置将被固定。

于 2012-09-19T07:36:37.853 回答
0

您可以通过使用在变换上使用过渡。Transform 将更改元素而不影响布局。你会想用transform: scaleY()说你想把某物的高度加倍：

transform: scaleY(2);
-webkit-transform: scaleY(2);
-moz-transform: scaleY(2);
-o-transform: scaleY(2);
于 2012-10-04T07:49:04.397 回答
0

把它<div>放在适当的位置。保持外侧的位置：固定，内侧的位置：绝对

或者另一种方法是使外部的最大高度固定，<div>内部<div>应保持最大变换高度等于外部的高度。这将有助于不让其他人<div>对交易产生影响

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

于 2016-04-19T12:44:15.963 回答
-1

您可以使用position: absolute代替position: fixed，这样当您打开 Web 开发人员工具时 div 不会移动。

于 2016-04-19T12:32:27.233 回答