html - CSS: テーブル セルの自動サイズ設定で、2 つの div が並んでいる

Question

テーブルセルに2つのdivがあります。左側の div をコンテンツに応じたサイズにし、右側の div を右にフロートさせたい。どちらも垂直方向の中央に配置する必要があります。

表のセルは次のように自動サイズ調整されます。

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

ここにフィドルがあります

Answer 1

両方のdivからフロートを追加display:table-cellおよび削除し、tdから幅を削除します

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

デモ

Answer 2

以下を確認してください。たとえば、両方の Div が互いに垂直方向に整列しています。

<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 3

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>