CSS3显示:table-cell&float？

Question

我有一个长div容器设置为display:table和&divs设置为display:table-cell; vertical-align: middle.

我对垂直对齐的结果非常满意,但是:

• 我不知道这3个div的宽度,
• 我希望其中一个位于div容器的右侧(当然减去填充),
• float: right不起作用display: table-cell.

这是一个例子(我想将金色div浮动到右边).我不能用JS.如果IE7不可能,我需要它在IE7 +或IE8 +中工作.任何提示/想法？

http://jsfiddle.net/cZ7Th/2/

Answer 1

我不知道这是否适用于IE7或8,但我已经通过组合width: 1px,width: auto和white-space: nowrap.将表格布局中的所有单元格定义为一个像素宽,但防止换行; 然后在要浮动的那个之前添加一个空的填充单元格.

http://jsfiddle.net/wZ96P/

似乎至少可以使用Chrome,Opera,Firefox和IE的现代版本.

Answer 2

对于此垂直对齐不起作用:

<div style="display: table-cell; vertical-align: middle; float: right">...</div>

但为此,它对我有用:

<div style="float: right">
  <div style="display: table-cell; vertical-align: middle">...</div>
</div>