CSS3 显示：表格单元格和浮动？答案

【问题标题】：CSS3 display: table-cell & float?CSS3 显示：表格单元格和浮动？
【发布时间】：2013-12-05 06:55:15
【问题描述】：

我将一个长的 div 容器设置为 display:table，并将其中的 & div 设置为 display:table-cell; vertical-align: middle。

我对垂直对齐的结果非常满意，但是：

这是一个示例（我想将金色 div 浮动到右侧）。我不能使用 JS。如果 IE7 不可能，我需要它在 IE7+ 或 IE8+ 中工作。任何提示/想法？

【问题讨论】：

【解决方案1】：

我不知道这是否适用于 IE7 或 8，但我通过结合 width: 1px、width: auto 和 white-space: nowrap 来做到这一点。将表格布局中的所有单元格定义为 1 像素宽，但防止换行；然后在要向右浮动的单元格之前添加一个空的填充单元格。

似乎至少可以与现代版本的 Chrome、Opera、Firefox 和 IE 一起使用。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

When float!=none then display = block

【讨论】：