我在表格单元格中有2个div。我想要左手div根据它的内容来确定大小,并且我希望右手div能够正确地浮动。两者都应该垂直居中。CSS:两个div并排在自动调整表格单元格中
表格单元自动调整大小是这样的:
<td style="width: 1px;">
...
</td>
我在表格单元格中有2个div。我想要左手div根据它的内容来确定大小,并且我希望右手div能够正确地浮动。两者都应该垂直居中。CSS:两个div并排在自动调整表格单元格中
表格单元自动调整大小是这样的:
<td style="width: 1px;">
...
</td>
增加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>
添加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
}
你可以尝试像下面的代码片段,%将使大小开始在该号码,自动调整
#div1
{ float: left; height:60%; width: 40%; }
#div2
{ float: right; height:60%; width: 60%; }
检查以下例如这两个事业部是根据垂直对齐彼此
<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>
如果添加什么其他细胞,让你有一个的价格,以及其他为箭头,就像这样:
<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;">></div>
</td>
从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。