CSS3显示：table-cell&浮动？ [英] CSS3 display: table-cell & float?

问题描述

我有一个长的div容器设置为 display：table 和&其中的div设置为 display：table-cell;

I've got a long div container set to display:table and & divs within it set to display:table-cell; vertical-align: middle.

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

I'm really happy with the results of vertical alignment, but:

• 我不知道这3个div的宽度，


• 我想要其中一个在右边div容器（当然减去填充），


• float：right 不能使用 display：table -cell 。

• I don't know the width of these 3 divs,
• I want one of them to be on the very right side of div container (minus padding of course),
• float: right doesn't work with display: table-cell.

这里有一个例子（我想把gold divs向右移动）。我不能使用JS。我需要它工作在IE7 +，或IE8 +如果不可能的IE7。任何提示/想法？

Here's an example (I want to float the golden divs to the right). I can't use JS. I need it to work in IE7+, or IE8+ if impossible for IE7. Any hints / ideas?

http：// jsfiddle。 net / cZ7Th / 2 /

推荐答案

我不知道这是否适用于IE7或8，通过组合 width：1px ， width：auto 和 white-space：nowrap 。将表格布局中的所有单元格定义为一个像素宽，但防止包装;

I don't know if this works with IE7 or 8, but I have done this by combining width: 1px, width: auto and white-space: nowrap. Define all cells in the table layout as one-pixel wide, but prevent wrapping; then add an empty padding cell before the ones you want to float right.

http：/ /jsfiddle.net/wZ96P/

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

Seems to work with the modern versions of Chrome, Opera, Firefox, and IE, at least.

这篇关于CSS3显示：table-cell&浮动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！