html - 在同一表格单元格中左右对齐和垂直底部

Question

我需要在同一个表格单元格中对齐两个文本，一个是左对齐，另一个是右对齐。 我可以通过执行以下操作来实现这一目标。

    <td valign="bottom" style="vertical-align:bottom;">
     <div style="float:left;text-align:left;">Yes,He is.</div>
     <div style="float:right;text-align:right;"><img src="x.gif" alt="img" height="30px"/>  </div> 
</td>

但问题是，当我这样做时，左对齐的文本出现了。该文本应在表格单元格中垂直底部对齐。我尝试将 "vertical-align:bottom" 设置为 td 单元格。但是没有用。

有人可以帮忙吗...这是jsfiddle

Answer 1

用外部 div 包裹子 div，并将 position:relative 赋予外部 div，将 absolute 赋予子 div。

HTML

<td >
    <div class="wrap">
 <div class="left">Yes,He is.</div>
 <div class="right"><img src="x.gif" alt="img" height="30px"/></div>
  </div>
</td>

CSS

.wrap{position:relative;overflow:auto}
.left{text-align:left; bottom:0; position:absolute; left:0}
.right{float:right;text-align:right;}

DEMO