当文本在左下角时，如何将标签内的图像位置设置在左上角

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 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

Answer 3

无需额外加价即可实现的方法

由于您指定了图标的尺寸（20x20），因此您可以利用它 并使用nth-child选择器将两个图标放置在表格单元格的左上角。

但是，您需要根据维度将left偏移设置为特定值 在.soldier中给出。

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>