如何設置​​裏面的圖片位置標籤位於左上角而文字位於左下方

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

既然你指定的圖標（20×20）的尺寸做到這一點無需額外加價

的一種方式，你可以利用該 和使用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>

Answer 3

您正在使用太多的代碼。使用CSS counters你可以使這個問題變得微不足道。

See this demonstration fiddle。我使用JS完全生成板，允許您在一個數組中使用它，然後使用CSS計數器（universally supported）和pseudo elements將這些數字放入絕對位置。

對於背景着色我使用瑣碎的嵌套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; 
} 

Sample linked again here to be sure you don't miss it。