怎么将html的table表格第一行每个单元格向上移动不同距离。

Question

本来想用margin-top取负，但是必须要有display:inline-block或block,但是会导致独占一行或重叠在一起。 怎么样才能使其每个单元只是垂直上移不同距离 ///////////////////////////html/////////////////////// <table> <tr> <td class="td1"><img src="img/mini/mini1.png"><P>1111</P></td> <td class="td2"><img src="img/mini/mini2.png"><P>242</P></td> <td class="td3"><img src="img/mini/mini3.png"><P>2424</P></td> <td class="td4"><img src="img/mini/mini4.png"><P>32</P></td> <td class="td5"><img src="img/mini/mini5.png"><P>324</P></td> <td class="td6"><img src="img/mini/mini6.png"><P>332</P></td> </tr> <tr> <td><img src="img/mini/mini7.png"><P>2222</P></td> <td><img src="img/mini/mini8.png"><P>2</P></td> <td><img src="img/mini/mini9.png"><P>2</P></td> <td><img src="img/mini/mini10.png"><P>2</P></td> <td><img src="img/mini/mini11.png"><P>32</P></td> <td><img src="img/mini/mini12.png"><P>4</P></td> </tr> /////////////////////////css///////////////////////// .td1{ width: 150px; margin-top: -300px;            //第一列每个单元格上移不同高度 } .td2{ width: 150px; margin-top: -350px; } .td3{ width: 150px; margin-top: -400px; } .td4{ width: 150px; margin-top: -350px; } .td5{ width: 150px; margin-top: -300px; } .td6{ width: 150px; margin-top: -250px; }

Answer 1

.td1{
    width: 150px;
    position:relative;
    bottom:300px;            //第一列每个单元格上移不同高度
}
.td2{
    width: 150px;
    position:relative;
    bottom:350px;    
}
.td3{
    width: 150px;
    position:relative;
    bottom:400px;  
}
.td4{
    width: 150px;
    position:relative;
    bottom:350px;  
}
.td5{
    width: 150px;
    position:relative;
    bottom:300px;  
}
.td6{
    width: 150px;
    position:relative;
    bottom:250px;  
}