对齐左右，并在同一个表单元格

我需要对齐两个文本之一是左，另一种是正确的，在同一个表单元垂直底部。我可以通过做下面的事情来达到这个目的。

<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

来源

2013-02-01 Rama Rao M

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

来源

2013-02-01 06:54:38 Sowmya

你可以解决它，只需创建与无形的界限细胞的表的所有文本。当我遇到类似问题时，我会这样做。

来源

2013-02-01 06:51:35 Ekonion

这是发生导致像高为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 Link

来源

2013-02-01 07:01:45

<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-01 07:07:15

对齐左右，并在同一个表单元格

回答

相关问题