CSS：兩個div並排在自動調整表格單元格中

Question

我在表格單元格中有2個div。我想要左手div根據它的內容來確定大小，並且我希望右手div能夠正確地浮動。兩者都應該垂直居中。

表格單元自動調整大小是這樣的：

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

Here is a fiddle

Answer 1

增加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> 

Answer 2

添加display:table-cell和從兩者的div除去浮體和從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 3

你可以嘗試像下面的代碼片段，％將使大小開始在該號碼，自動調整

#div1 
{ float: left; height:60%; width: 40%; } 

#div2 
{ float: right; height:60%; width: 60%; } 

Answer 4

檢查以下例如這兩個事業部是根據垂直對齊彼此

<table width="100%" border="1"> 
    <tr> 
     <td> 
      <div style="display:table-cell; vertical-align:middle;">tetstingdfsdfds <br>test </div> 

      <div style="text-align:right; display:table-cell; vertical-align:middle;">right side ...</div> 
     </td> 
</tr> 

</table> 

Answer 5

如果添加什麼其他細胞，讓你有一個的價格，以及其他爲箭頭，就像這樣：

<td style="background: #66FFCC; vertical-align: middle; width: 1px;"> 
    <div style="font-size: 2em; line-height: 1.4;background: #FFCC66;">$50</div> 
</td> 
<td style="background: #66FFCC; vertical-align: middle; width: 1px;"> 
    <div style="background: #CCFF66;">&gt;</div> 
</td> 

Sample

Answer 6

從td刪除width: 1px;，並添加display: inline-block到兩個div的：

.left{ 
    display: inline-block; 
    float: left; 
    background: #FA0; 
    font-size: 2em; 
    line-height: 1.4em; 
} 
.right{ 
    display: inline-block; 
    float: right; 
    background: #AF0; 
    font-size: 1em; 
    line-height: 2.8em; 
} 

這是fiddle。