CSS:自动调整表格单元格中的两个div

Question

我在表格单元格中有2个div.我希望左手div根据它的内容调整大小,我希望右手div能够向右浮动.两者都应垂直居中.

表格单元格自动调整如下:

<td style="width: 1px;">
   ...
</td>

这是一个小提琴

Answer 1

添加display:table-cell和删除两个div中的float并从td中删除宽度

.left{
    font-size: 2em; 
    line-height: 1.4;
    background: #FFCC66; 
    display:table-cell
}
.right{
    background: #CCFF66;
    display:table-cell; 
    vertical-align:middle
}

DEMO

Answer 2

增加 td 宽度

<td style="width:56px;">
 <div style="float: left; font-size: 2em; line-height: 1.4; background: #FFCC66">$50</div>
 <div style="float: right; background: #CCFF66; margin-top:10px;"></div>
</td>