float successivo fratello rimasto della precedente pari livello

Question

Non so come o se questo può essere fatto con Internet Explorer 6.

Sto cercando di galleggiare il prossimo fratello alla sinistra del fratello precedente

Questo è ciò che sto facendo e viene visualizzato correttamente con chrome 6, opera 9 e firefox 1+.

Che il problema con IE6 è che il previous (2) è flottato verso l'estrema destra (dove sarebbe meglio per essere accanto a next (1) che si trova sul lato sinistro della pagina.

.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> 

Se può essere fatto e si sa come farlo darò una taglia di 250 punti

Answer 1

Qui si va: http://result.dabblet.com/gist/2489753

Non è possibile utilizzare carri lì, perche' IE ha un brutto bug, dove si estende il contenitore flottato a sinistra (o è inline-block) se contiene il float: right;.

Tuttavia, esiste una proprietà raramente utilizzata direction, che può essere utilizzata per tali layout: è completamente cross-browser e può essere utilizzata con inline-block s per l'effetto migliore.

Quindi, per il vostro caso il codice sarebbe questo:

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

Ma la display: inline-block non funzionano per IE dalla scatola, quindi è necessario incidere rendendolo in linea ma con hasLayout, così aggiungi quelli a IE solo nei commenti condizionali:

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

Questo è tutto!

Passo dopo passo:

1. rendere tutto in linea blocchi, quindi sarebbe lavorare in flusso in linea.
2. Invertire il flusso sull'involucro.
3. Restituisce il flusso alla modalità ltr normale nei bambini.
4. E 'fatta :)

Answer 2

non ricordo se questo trucco funziona in IE6.

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

I non credo che si avrà bisogno .wrap{float:left;}

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

In questo modo .prev Ottiene la larghezza sinistra dopo .left è flottato.

Demos:

con pellicola galleggiante: http://jsbin.com/exevis

Senza involucro galleggiante: http://jsbin.com/opehig

Answer 3

Basta tenere a mente che la proprietà di direzione ha lo scopo di indicare la direzione del testo per lingue come l'ebraico al contrario di layout di contenuti. Mentre la risposta di kizu è molto intelligente quando si tratta della mostruosità di ie6, ti consiglio di avvolgerla in modo condizionale e di essere sicuro di documentare l'hack anche se sei l'unico sviluppatore a pagina. Tutto ciò che serve sono un paio di mesi e forse un paio di martini per l'avvio, e questa implementazione apparirà abbastanza priva di senso.