在同一表格单元格中左右对齐并垂直向下对齐

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;}

演示

Answer 2

您可以解决它，只需在单元格中创建一个表格，所有文本都有不可见的边框。当我遇到这样的事情时，我会这样做。

Answer 3

发生这种情况

是因为图像高度为 30px，文本高度很小。要与底部对齐，请为父 td 分配一个相对位置，然后将文本div 分配给 td 的左下角。

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

JSFIDDLE Link

Answer 4

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