html - CSS:两个 div 并排，在自动调整表格单元格中

Question

我在一个表格单元格中有 2 个 div。我想让左边的 div 根据它的内容调整大小，我想让右边的 div 向右浮动。两者都应垂直居中。

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

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

Here is a fiddle

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