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）＆＃34; float＆＃34;布局？

1 个答案: