4

我在表格单元格中有 2 个 div。我希望左侧 div 根据其内容调整大小，并且我希望右侧 div 向右浮动。两者都应该垂直居中。

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

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

这是一个小提琴

4

6 回答 6

5

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

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

演示

于 2013-04-10T06:56:09.723 回答
1

您可以尝试下面的代码片段，% 将使大小从该数字开始并自动调整大小

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

#div2
{ float: right; height:60%; width: 60%; }
于 2013-04-10T06:57:48.477 回答
0

检查下面，例如两个 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>
于 2013-04-10T07:09:39.463 回答
0

如果你添加另一个单元格，那么你有一个用于价格，另一个用于箭头，如下所示：

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

样本

于 2013-04-10T07:14:01.730 回答
0

增加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>
于 2013-04-10T06:54:54.827 回答
0

width: 1px;从 中删除td并添加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;
}

这是一个小提琴。

于 2017-04-05T08:10:05.533 回答