CSS3显示：table-cell＆amp;浮动？

Question

我有一个长div容器设置为display:table和＆amp;其中的div设置为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>

Answer 3

When float!=none then display = block