Float right ohne Reihenfolge ändern, erzwungene schrumpfen

Question

Dieses Problem ist wahrscheinlich ziemlich einfach zu lösen, aber ich bin mir nicht sicher, was ich falsch mache.

Ich habe den folgenden Code:

HTML:

<div class='absolute'> 
    <div class='container'> 
     <span>blabla</span> 
     unknown number of spans.. 
    </div> 
</div> 

CSS:

.absolute{ 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
} 
.container{ 
    float: right; 
} 
span{ 
    display:block; 
    float: left; 
} 

Im Grunde, was ich will, ist, alle Spannweiten in der unteren rechten in einer geraden Linie haben . Das absolute Div funktioniert einwandfrei und Container div schweben genau so wie ich es will. Das Problem besteht darin, dass sich die Spannweiten nicht in einer Reihe aufreihen. Ich bekomme folgendes Aussehen:

Das Rot ist absolut div, das Blau das Container div und das Grün die Spannen. Nun, du siehst mein Problem ..

Ich habe versucht, den Container div eine Breite zu geben. Dies ergibt eine gerade horizontale Linie, wie die, die ich möchte, außer dass die Spannen nach links bis zur Breite des blauen Container-Divs schweben. Und ich kann die Breite nicht berechnen, weil ich die Anzahl der Spannweiten nicht kenne.

Also wie löse ich das, ohne irgendeine Reihenfolge zu ändern und ohne eine Breite zum Behälter div zu setzen? Oder besser: Warum schrumpft der Container überhaupt und bleibt nicht nur so breit, wie der Float es haben will?

Danke für jede Antwort!

Answer 1

wechseln Sie zu überspannen:

display: inline-block; 

sollten sie nebeneinander gehen. Dies ist in IE7 oder früher, wenn auch nicht unterstützt, wenn das für Sie wichtig ist, können Sie dies tun:

display: inline-block; *display: inline; 

Oh, und entfernen Sie auf der Spannweite des Schwimmers links.

Answer 2

Anzeige ändern: anzuzeigender Block: Inline-Block?