我如何保持我的调整大小动画(javascript）不会弄乱我的(css）"浮动“;布局

How can I keep my resizing animation (javascript) from messing up my (css) "float" layout?

本文关键字：我的 quot css 浮动 布局 会弄 动画 何保持 javascript 调整      更新时间：2023-09-26

我使用floats:在css中进行了布局

.thumb{
  border-radius:20px;
  border: RGB(245, 245, 220);
  border-width: 10px;
  border-style:solid;
  float:left;
  margin:20px;
  padding:0px
}

然后我写了一些javascript，使图像通过鼠标悬停进行扩展。

$(".thumb img").mouseover(function() {
$(this).animate({'width':204, 'height':252}, {duration:300});
                    }).mouseout(function(){
$(this).animate({'width':195, 'height':240}, {duration:100});
                    });

我想我应该预料到这会打乱布局——当你滚动一张图像时，下一行会向下移动一行——有办法解决这个问题吗？

Fiddle

将图像元素设置为.tumb绝对值，并将.tumb元素设置为相对值。让你的.thumb元素绝对，它应该会起作用。大致应该是这样的：

.thumb{
  border-radius:20px;
  border: RGB(245, 245, 220);
  border-width: 10px;
  border-style:solid;
  float:left;
  margin:20px;
  padding:0px;
  position: relative;
}
.thumb img {
  position: absolute;
  top: 0;
  left: 0;
}
相关文章：