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

Posted 2023-03-05

技术标签:

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

我将一个长的 div 容器设置为 display:table，并将其中的 & 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/

【问题讨论】：

【参考方案1】：

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

http://jsfiddle.net/wZ96P/

似乎至少可以与现代版本的 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

【讨论】：

以上是关于CSS3 显示：表格单元格和浮动？的主要内容，如果未能解决你的问题，请参考以下文章