pływak obok rodzeństwa pozostało z poprzedniego rodzeństwa

Question

Nie wiem, w jaki sposób lub jeśli można to zrobić z programu Internet Explorer 6.

Staram się unosić następnego rodzeństwo na lewo od poprzedniego rodzeństwa

Oto, co robię i wyświetla się poprawnie w chrome 6, opera 9 i firefox 1+.

Jaki problem z IE6 jest to, że previous (2) jest dystrybuowana do prawej (gdzie byłoby najlepiej, aby być obok do next (1) który jest po lewej stronie strony.

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

Jeśli to możliwe zrobić i wiesz jak to zrobić, dam bounty 250 punktów

Answer 1

Proszę bardzo: http://result.dabblet.com/gist/2489753

Nie można używać tam pływaków, bo IE mają paskudny błąd, gdzie rozciąga pojemnik, który płynie w lewo (lub jest inline-block), jeśli zawiera on float: right;.

Istnieje jednak rzadko używana właściwość direction, która może być używana dla takich układów: jest w pełni obsługiwana w różnych przeglądarkach i można jej używać z najlepszymi efektami w przypadku inline-block.

więc w Twoim przypadku kod byłoby to:

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

Ale display: inline-block nie działają dla IE z pudełka, więc trzeba go poprzez włamywanie go inline ale z hasLayout, więc dodaj je do IE tylko w komentarzach warunkowych:

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

To wszystko!

Krok po kroku:

1. aby wszystko inline-klocki, tak to działa w przepływie rolkach.
2. Odwrócić przepływ na opakowaniu.
3. Przywróć przepływ do normalnego trybu ltr w elementach podrzędnych.
4. Zrobione :)

Answer 2

nie mogę sobie przypomnieć, czy ta sztuczka działa w IE6.

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

i Nie sądzę, trzeba będzie .wrap{float:left;}

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

ten sposób .prev dostaje szerokość w lewo po .left się unosił.

Demos:

Z okład pływający: http://jsbin.com/exevis

Bez owijania pływający: http://jsbin.com/opehig

Answer 3

Wystarczy pamiętać, że nieruchomość kierunek ma wskazywać kierunek tekstu dla języków takich jak hebrajski, w przeciwieństwie do układania treści. Podczas gdy odpowiedź Kizu jest bardzo sprytna, gdy mamy do czynienia z monstrualnością w ie6, zalecam, abyś zawarł ją w trybie warunkowym i upewnij się, że dokumentujesz hack, nawet jeśli jesteś jedynym programistą na stronie. Wszystko, czego potrzeba, to kilka miesięcy i może kilka martinis do uruchomienia, a ta implementacja będzie wydawać się zupełnie bezsensowna.