如何让我的大小调整动画（javascript）不会搞乱我的（css）“浮动”布局？

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; 
}