Question

我有一张桌子，我想要做的是在每个单元格中放置一个div 溢出：隐藏，以便当有人在图像上盘旋时，div会降下来。问题在于，通过这样做，增加的大小随着div的大小的增加而增加。该怎么办？的CSS：

.table{
position:fixed;
top:50px;
left:200px;
table-layout:fixed;
}
.table td p{
position:relative;
margin:0;
}
.table td{
height:250px;
width:240px;
overflow:hidden;
  }
  .table td div{
position:relative;
height:50px;
top:-100px;
left:0;
text-align:center;
z-index:2;
color:#CCC;

-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-ms-transition: top 0.2s;
    }
    .table td img{
position:relative;
left:20px;
top:-5px;
height:200px;
width:200px;

    }
    .table td:hover div{
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-ms-transition: top 0.2s;

top:50px;
    }

抱歉，html是这样的：

   <table class="table">
    <tr>
        <td><div>description</div><img src="something.jpg" alt="Not Found"><p>Hello</p></td>
        <td><div>description</div><img src="something.jpg" alt="Not Found"><p>Hello</p></td>
    </tr>
</table>

Answer 1

尝试在td中使用position：relative，在div中使用absolute，如下所示：

.table td{
    position:relative;
    height:250px;
    width:240px;
    overflow:hidden;
    border:1px solid red;
}
.table td div{
    position:absolute;
    height:50px;
    top:-100px;
    left:0;
    text-align:center;
    z-index:2;
    color:#CCC;

    -webkit-transition: top 0.2s;
    -moz-transition: top 0.2s;
    -o-transition: top 0.2s;
    -ms-transition: top 0.2s;
}

演示：http://jsfiddle.net/2hU6W/

添加div时大小会增加

1 个答案: