javascript - How to set image position inside <td> tag to be on top-left corner while text is on the left-bottom -

admin管理员组

文章数量:1292445

I have two pawns and I want to set them on the top-left corner while the text (cell number) is on left-bottom.

This is what I have:

This is what I want to have:

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>

I have two pawns and I want to set them on the top-left corner while the text (cell number) is on left-bottom.

This is what I have:

This is what I want to have:

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>

• javascript
• jquery
• html
• css

Share Follow edited Sep 26, 2014 at 22:16 E235 asked Sep 26, 2014 at 21:45 E235E235 13.5k2828 gold badges110110 silver badges159159 bronze badges 2

• try adding .soldiers { position:relative; left:0; top:0; width:20px; height:20px; } – Rahul Dess Commented Sep 26, 2014 at 21:51
• You can apply even and odd with td:nth-child(even) { } and td:nth-child(odd) { } jsfiddle/BrianDillingham/v6qrfvrd/1 only foregoing IE 6 support. – Brian Dillingham Commented Sep 26, 2014 at 22:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Wrap the number in a span and position it at the bottom, 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>

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

See this demonstration fiddle. I generate the board pletely in JS, allowing you to use it in an array, and then use CSS counters (universally supported) with pseudo elements to put the numbers in there with absolute positioning.

For the background coloring I use trivial nested nth-child selectors. Then just apply vertical-align:top to the cell and let the flow do the job - I use text content here but images will flow the same as they're both inline content.

All the CSS needed:

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.

A way to do it without extra mark-up

Since you specified the dimensions of the icons (20x20), you can take advantage of that and use the nth-child selector to position the two icons to the top left of the table cell.

However, you do need to set the left offset to a specific value based on the dimension 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>

本文标签：