Question

我在一个单元格内有两个图像。我希望一个在单元格的中间对齐，另一个在单元格的右上角。右上角图像应覆盖居中的图像。

我希望它看起来像这个

但未指定左边距，因为居中图像可以具有不同的尺寸。

这是我现在获得的HTML代码

<table border="1" bgcolor="black"> 
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>  
  </tr>
  <tr> 
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr> 
</table>

和CSS

.topRight 
{
  position:absolute;
  left:495px;
}

Answer 1

我想你想要这样的东西

＆＃13;

.topRight {
  position: absolute;
  top: 0;
  right: 0;
}
td{position: relative;}

＆＃13;

<table border="1" bgcolor="black">
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr>
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr>
</table>

＆＃13;

Answer 2

您可以使用right属性代替left，并将position:relative;用于td元素。

.topRight {
    position: absolute;
    right: 1px;
    top: 1px;
}

td
{
    position: relative;
}

<table border="1" bgcolor="black">
    <tr>
        <td>
            <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
            <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
            <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
        </td>
    </tr>
</table>

Jsfiddle

如何在两个不同的位置对齐表格单元格内的两个图像？

2 个答案: