Question

我的aspx页面中有以下表格结构。我需要将图像放在表格单元格的右下角。以下代码适用于IE和Chrome。但在Firefox和Safari中，图像显示在行的右下角，而不是单元格。

  <table style="width:100%">
    <tr>
     <td valign="top" style="width:20%; position:relative">
      <div>
         //some controls here
      </div> 
      <img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/> 
     </td>
     <td valign="top" style="width:80%">
      <div>
        //control here

      </div>
     </td>
    </tr>
    &nbsp;
    <tr>
     <td align="center" colspan="1" style="width: 20%">
       //control here
      </td>
      <td align="center" colspan="2" style="width: 80%">
      </td>
    </tr>
    <tr>
      <td align="center" style="width:100%" colspan="2">
       //control here
       </td> 
    </tr>
    </table>

请帮忙！感谢。

Answer 1

我通过为图像添加另一行并设置其对齐来解决此问题。

         <tr>
           <td style="width: 20%;" align="right" valign="bottom">
             <asp:Image ID="Img1" runat="server" />

           </td>
         </tr>

Answer 2

我认为你需要删除位置：此图像的父td的相对位置，因为图像的绝对值是相对于具有位置的td完成的：relative

<table style="width:100%">
    <tr>
     <td valign="top" style="width:20%;">
      <div>
         //some controls here
      </div> 
      <img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/> 
     </td>
     <td valign="top" style="width:80%">
      <div>
        //control here

      </div>
     </td>
    </tr>
    &nbsp;
    <tr>
     <td align="center" colspan="1" style="width: 20%">
       //control here
      </td>
      <td align="center" colspan="2" style="width: 80%">
      </td>
    </tr>
    <tr>
      <td align="center" style="width:100%" colspan="2">
       //control here
       </td> 
    </tr>
    </table>

将图像放置在表格单元格的右下角在Firefox和Safari中不起作用

2 个答案: