Geek Answers Handbook

How to set the position of the image inside the <td> tag in the upper left corner, while the text is in the lower left

I have two pawns, and I want to set them in the upper left corner , and the text (cell number) is on the left.

This is what I have:
enter image description here

This is what I want :
enter image description here

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>
+4
source share
3 answers

Wrap the number in spanand place it below, and vertical-align: top;everything else.

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>
Run code
+4
source

You are using too much code. Using CSS counters , you can make this problem completely trivial.

. 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;
}

, , , .

+2

(20x20), nth-child .

However, you need to set the offset leftto a specific value based on the measurement given in .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>
Run code
0
source

More articles:


All Articles