如何使此代码垂直对齐底部

得到了这个简单的HTML代码片段，我想使TEST（第三个<td>组件）对齐到该行的底部，但无论我尝试什么，它都会保持不变。如何使此代码垂直对齐底部

我知道有这样的成千上万的问题，我读了3-4篇文章，但没有尝试过的东西。

<table border="0"> 
     <tr> 
      <td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143" 
       height="123"></td> 
      <td width="775"> 
      <h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1> 
      </td> 
      <td style="float:right;vertical-align:text-bottom"> 
      TEST 
      </td> 
     </tr> 
    </table>

谢谢！

来源

2011-04-07 Ben

你有没有试过vertical-align：bottom？ – Headshota 2011-04-07 13:42:18

使用表格进行布局是可耻的。改用DIV。 – 2011-04-07 13:44:33

您应该将您的风格代码放在标记之外，以便正确分离问题。 – StuperUser 2011-04-07 13:52:40

只需卸下float并使其vertical-align: bottom，它会掉下深渊！

来源

2011-04-07 13:43:09 adarshr

Tnx。这样可行。但我需要它漂浮在右边。我能做什么？ – Ben 2011-04-07 13:50:09

text-align：right; – 2011-04-07 13:55:23

<td valign="bottom">

应该工作

来源

2011-04-07 13:42:15 zer0w1dthspace

我读到这是非常糟糕的做法 – Ben 2011-04-07 13:48:40

乍一看你不应该使用表格设计布局 – zer0w1dthspace 2011-04-07 13:50:48

是的:-)这也是正确的。无论如何..我试了一下，但没有奏效。我试图看看如何结合浮动和垂直对齐，因为它似乎是'浮动'造成的问题 – Ben 2011-04-07 13:52:36

如何：

<table border="0"> 
    <tr> 
     <td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143" 
      height="123"></td> 
     <td width="775"> 
     <h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1> 
     </td> 
     <td valign="bottom"> 
     TEST 
     </td> 
    </tr> 
</table>

来源

2011-04-07 13:42:22 Druid

我rad不应该使用valign ...（不赞成） – Ben 2011-04-07 13:50:38

@Ben：那么桌子:)我只是尝试了上面的代码，并且按照您的描述将其与底部对齐。 – Druid 2011-04-07 13:54:00

从W3Schools：

文本底部的元素的底部与父元素字体的底部对齐

可能是此次TD没有父元素，有字体要对齐。正如其他人所建议的那样，使用简单的'底部'将与同一行上的最低元素对齐。

来源

2011-04-07 13:47:00 Laas

如何使此代码垂直对齐底部

回答

相关问题