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

Answer 2

您可以尝试类似下面的代码段，％会使大小从该号码开始并自动调整大小

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

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

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>

Answer 4

检查以下内容，例如两个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 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

从width: 1px;移除td，然后将display: inline-block添加到div＆＃39}：

.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。

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

6 个答案: