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

您可以解决它，只需在单元格中创建一个表格，其中包含所有文本的隐形边框。我这样做，当我遇到类似的问题。

Answer 2

用外部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

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>

在同一个表格单元格中左右对齐和垂直对齐

4 个答案: