Question

我无法让td顶部有一些文字，底部有一个图像按钮。这是与我现在类似的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<table border="1">
  <tr>
    <td valign="top" style="padding:0; height:100%">
      Some text
      <form style="vertical-align: bottom;">
        <input type="submit" value="should be at bottom of td"/>
      </form>
    </td>
    <td>
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
    </td>
  </tr>
</table>
</body>
</html>

从技术上讲，我可以通过将第一个<td>分成两行并在另一个rowspan="2"上使用<td>来实现我想要的效果，但我想避免这样做，因为它不是直观，我认为这是一个黑客。此外，我只需要支持最新版本的FF和Chrome。有什么想法吗？

P / S：我我在这里处理表格数据所以请不要“你不应该使用表格！”一种建议。

更新：添加了DocType和浏览器支持要求。

Answer 1

终于找到了怎么做。关键是将<table>的高度设置为100％。我还删除了顶部对齐文本周围的<p>。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<body>

<table border="1" style="height: 100%;">
  <tr>
<td style="height:100%;">
   <div style="position:relative;height:100%; margin:0; padding:0;">
      Some text
      <form style="position:absolute;bottom:0px; margin:0; padding:0;">...</form>
   </div>
</td>
    <td>
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
    </td>
  </tr>
</table>

</body>
</html>

Answer 2

不确定这是否是最佳方式，但这应该有效。

<html>  
<head></head>  
<body>  
<table border="1">  
  <tr>  
    <td style="padding:0;height:100%;">  
      <table style="height:100%;">
        <tr>
            <td style="vertical-align:top;">        
                <p style="vertical-align: top;">Some text</p> 
            </td>
        </tr>
        <tr>
            <td style="vertical-align:bottom;">
                <form>  
                  <input type="submit" value="should be at bottom of td"/>  
                </form> 
            </td>
        </tr>
      </table> 
    </td>  
    <td>  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />   
    </td>  
  </tr>  
</table>  
</body>  
</html>

Answer 3

您应该能够使用CSS定位。试试这个，但当然使用CSS样式表： - ）

<td style="height:100%">
   <div style="position:relative;height:100%;">
      <p>Some text</p>
      <form style="position:absolute;bottom:0;">...</form>
   </div>
</td>

请注意，您需要在div内放置td，因为该位置属性无法在td

中使用

在顶部和底部都有元素

3 个答案: