CSS3-Anzeige: Tabellenzelle & Float?

Question

Ich habe einen langen div Container auf display:table und & divs innerhalb gesetzt auf display:table-cell; vertical-align: middle gesetzt.

Ich bin wirklich mit den Ergebnissen der vertikalen Ausrichtung glücklich, aber:

• Ich weiß nicht, die Breite dieser 3 divs,
• Ich möchte einer von ihnen auf dem sehr gut werden Seite des Div-Containers (minus Polsterung natürlich),
• float: right funktioniert nicht mit display: table-cell.

Hier ist ein Beispiel (ich möchte die goldenen divs nach rechts schweben). Ich kann JS nicht verwenden. Ich brauche es in IE7 + oder IE8 + zu arbeiten, wenn es für IE7 unmöglich ist. Irgendwelche Hinweise/Ideen?

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

Answer 1

Ich weiß nicht, ob dies mit IE7 funktioniert oder 8, aber ich habe dies getan, indem width: 1px Kombination width: auto und white-space: nowrap. Definieren Sie alle Zellen im Tabellenlayout als ein Pixel breit, aber verhindern Sie das Umbrechen. Fügen Sie dann eine leere Füllzelle vor denen, die Sie nach rechts schweben möchten.

http://jsfiddle.net/wZ96P/

scheint mit den modernen Versionen von Chrome, Opera, Firefox und IE, zumindest zu arbeiten.

Answer 2

Für diese vertikale align nicht funktioniert:

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

Aber dafür funktioniert es für mich:

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

Answer 3

When float!=none then display = block