Schwimmer nächste Geschwister links von vorherigen Geschwister

Question

Ich weiß nicht, wie oder ob dies kann mit dem Internet Explorer 6.

getan wird

Ich versuche, die nächsten Geschwister links von dem vorherigen Geschwister zu schweben

Das ist was ich mache und es wird korrekt angezeigt mit Chrome 6, Oper 9 und Firefox 1+.

Was mit IE6 das Problem ist, dass die previous (2) auf der rechten Seite schwebt (wo es am besten wäre, neben zu next (1), der auf der linken Seite der Seite zu sein.

.wrap{float:left;} 
.prev {float:right;} 
.next {float:left;} 


<div class="wrap"> 
<div class="prev">previous (2)</div><div class="next">next (1)</div> 
</div> 

Wenn es kann getan werden, und Sie wissen, wie es zu tun i

Answer 1

Hier gehen Sie: http://result.dabblet.com/gist/2489753

Sie nicht schwimmt dort verwenden können, denn IE eine haben böser Fehler, bei dem es den nach links schwebenden Behälter dehnt (oder inline-block), wenn er die float: right; enthält.

Es gibt jedoch eine selten verwendete Eigenschaft direction, die für solche Layouts verwendet werden kann: Es ist vollständig Cross-Browser und Sie können es mit inline-block s für den besten Effekt verwenden.

für Ihren Fall So wäre der Code folgendermaßen aus:

.wrap{ 
    display: inline-block; 
    direction: rtl; 
    } 
.prev, 
.next { 
    display: inline-block; 
    direction: ltr; 
    } 

Aber die display: inline-block arbeitet nicht für das Internet Explorer aus dem Feld, so dass Sie es hacken müssen, indem sie es inline zu machen, aber mit hasLayout, so füge diese zu IE nur in bedingten Kommentaren hinzu:

.wrap, 
.prev, 
.next { 
    display: inline; 
    zoom: 1; 
    } 

Das war's!

Schritt für Schritt:

1. Machen Sie alles Inline-Blöcke, so wäre es in Inline-Strömungs arbeiten.
2. Den Fluss auf der Verpackung umkehren.
3. Geben Sie den Fluss in den normalen Modus zurück.
4. Es ist geschafft :)

Answer 2

eine Prämie von 250 Punkten geben werde ich nicht mehr, ob dieser Trick in IE6 funktioniert.

.wrap{float:left;} 
.next {float:left;} 
.prev {overflow:hidden} 

I glaube nicht, müssen Sie .wrap{float:left;}

<div class="wrap"> 
    <div class="next">next (1)</div> 
    <div class="prev">previous (2)</div> 
</div> 

Auf diese Weise .prev die Breite links wird nach .left schwimmt.

Demos:

mit Wrap-Floating: http://jsbin.com/exevis

Ohne Wrap Schwimm: http://jsbin.com/opehig

Answer 3

Denken Sie auch daran, dass die Richtung Eigenschaft ist Inhalt Auslegen im Gegensatz zu Sprachen wie Hebräisch Textrichtung, um anzuzeigen, gedacht. Während Kizu's Antwort sehr schlau ist, wenn es um die Monstrosität von ie6 geht, empfehle ich Ihnen, es in einen bedingten Code zu packen und den Hack zu dokumentieren, selbst wenn Sie der einzige Entwickler auf der Seite sind. Es dauert nur ein paar Monate und vielleicht ein paar Martinis, und diese Implementierung wird als ziemlich unsinnig erscheinen.