對齊左右，並在同一個表單元格

我需要對齊兩個文本之一是左，另一種是正確的，在同一個表單元垂直底部。我可以通過做下面的事情來達到這個目的。

<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

對齊左右，並在同一個表單元格

回答

相關問題