如何防止调整大小动画 (javascript) 弄乱我的 (css) "float" 布局？

Question

我在 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

Answer 1

使您的图像元素成为绝对的 .thumb 元素，并使 .thumb 元素成为相对的。使您的 .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;
}

如何防止调整大小动画 (javascript) 弄乱我的 (css) "float" 布局？

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

html

javascript

css

layout

css-float