如何將文本位於左下角的<td>標簽內的圖像位置設置在左上角

Question

我有兩個棋子，我想將它們設置在左上角， 而文本（單元格編號）位於左下角。

這就是我所擁有的：

這就是我想要的 ：

CSS ：

td {
    width: 80px;
    height: 80px;
    text-align: left;
    vertical-align: bottom;
    border: 1px solid black;
}

.soldiers
{
    width:20px;
    height:20px;
}

HTML ：

<tr>
<td class="oddCellBorder" row="0" col="0">57
<img src="Resources/images/player_2.png" class="soldiers">
<img src="Resources/images/player_1.png" class="soldiers">
</td>
<td class="evenCellBorder" row="0" col="1">58</td>
<td class="oddCellBorder" row="0" col="2">59</td>
<td class="evenCellBorder" row="0" col="3">60</td>
<td class="oddCellBorder" row="0" col="4">61</td>
<td class="evenCellBorder" row="0" col="5">62</td>
<td class="oddCellBorder" row="0" col="6">63</td>
<td class="evenCellBorder" row="0" col="7">64</td>
</tr>

Answer 1

將數字包裹在一個span並將其放在底部，並vertical-align: top; 其他一切。

 td { position: relative; vertical-align: top; width: 80px; height: 80px; text-align: left; border: 1px solid black; } td span { position: absolute; bottom: 0; } 

 <table> <tr> <td> <span>57</span> <img src="http://placehold.it/20x20/ff6a00/ff6a00" alt="" /> <img src="http://placehold.it/20x20/fb235e/fb235e" alt="" /> </td> </tr> </table> 

Answer 2

您使用的代碼太多了。 使用CSS計數器可以使這個問題完全無關緊要。

看這個演示小提琴 。 我在JS中完全生成了板，允許您在數組中使用它，然后使用CSS計數器（ 普遍支持 ）和偽元素將數字放在那里，使用絕對定位。

對於背景着色，我使用了瑣碎的嵌套nth-child選擇器。 然后只需將vertical-align:top應用於單元格並讓流程完成工作 - 我在這里使用文本內容，但圖像將流動相同，因為它們都是內聯內容。

所需的所有CSS：

table {
    counter-reset:number 65;
}
td {
    border:1px solid black;
    counter-increment:number -1;
    width:64px;
    height:64px;
    position:relative;
    vertical-align:top;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
    background:#aaf;
}
td:after {
    content:counter(number);
    position:absolute;
    bottom:0;
    left:0;
}

樣品在這里再次鏈接，以確保您不會錯過它 。

Answer 3

一種沒有額外標記的方法

由於您指定了圖標的尺寸（20x20），因此您可以利用它並使用第nth-child選擇器將兩個圖標放置在表格單元格的左上角。

但是，您需要根據.soldier給出的尺寸將left偏移設置為特定值。

 td { width: 80px; height: 80px; text-align: left; vertical-align: bottom; border: 1px solid black; position: relative; } .soldiers { width: 20px; height: 20px; display: inline-block; margin-right: 5px; position: absolute; top: 0; } img:nth-child(1) { left: 0; } img:nth-child(2) { left: 25px; } 

 <table> <tr> <td class="oddCellBorder" row="0" col="0"> 57 <img src="http://placehold.it/10x10" class="soldiers"> <img src="http://placehold.it/10x10" class="soldiers"> </td> <td class="evenCellBorder" row="0" col="1">58</td> <td class="oddCellBorder" row="0" col="2">59</td> <td class="evenCellBorder" row="0" col="3">60</td> <td class="oddCellBorder" row="0" col="4">61</td> <td class="evenCellBorder" row="0" col="5">62</td> <td class="oddCellBorder" row="0" col="6">63</td> <td class="evenCellBorder" row="0" col="7">64</td> </tr> </table>