Question

css 鼠标移入后div向下延伸且不影响下一行div该怎么做？如图所示

Answer 1

每个div设置成float:right;自己定好初始位置，

然后过度div的高度，如
div
{
float:right;
width:100px;
height:100px;
background:blue;
transition:height 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:height 2s; /* Opera */
}

div:hover
{
height:300px;
}
最后，
通过js设置鼠标经过的div的
z-index，

让它的z方向值最高，以至于不被遮挡
最后一步如果有遮挡的情况可以这么解决，如果没有就不用了

追问

大神我这种情况怎么解决
.bg{height: 300px;width: 400px;background: gray;}
.box1, .box2{position:relative;width: 200px;height: 130px;background: red;}
.box1{z-index: 1;margin-bottom: 20px;}
.box1:hover{height: 170px;

Answer 2

绝对定位 + css3

追问

如果使用ul制作两行并使用floa：left，如何才能不史第二行位置发生改变？