0


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

    <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

4

4 回答 4

1

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

于 2013-02-01T06:51:35.803 回答
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;}

演示

于 2013-02-01T06:54:38.537 回答
0

发生这种情况是因为图像高度为 30 像素且文本高度很小。为了与底部对齐，为父 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 链接

于 2013-02-01T07:01:45.023 回答
0 
<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>
于 2013-02-01T07:07:15.667 回答