フロート次の兄弟は、私にはわからないどのようにか、これは、インターネットエクスプローラで行うことができるならば前の兄弟

Question

の左に、私は前の兄弟の左に次の兄弟を浮上しようとしています6.

これは私がやっていることで、chrome 6、opera 9、firefox 1+で正しく表示されます。 IE6の問題は、それができる場合previous (2)が、それはページの左側にあるnext (1)に横になるのがベストだろう場所（右端。

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

に浮いていることは何ですか

行われ、あなたはそれを行う方法を、私は250ポイント

Answer 1

ここに行く：http://result.dabblet.com/gist/2489753

あなたがそこにフロートを使用することはできません、「IEを持っている原因それがfloat: right;を含んでいれば、それは左にフローティングされたコンテナ（またはinline-block）を伸ばします。

しかし、まれに使用されるプロパティdirectionがあります。このレイアウトは、完全なクロスブラウザであり、最良の効果を得るためにinline-blockで使用できます。

だから、あなたのケースのためのコードは次のようになります：

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

しかしdisplay: inline-blockが箱からIEには対応していませんので、あなたがそう、インラインそれを作ることではなくhasLayoutでそれをハックする必要があります条件付きコメントでのみこれらをIEに追加してください：

これだけです！ステップバイ

ステップ：

1. それはインラインフローで動作しますので、すべてのインライン・ブロックを作成します。
2. ラッパーのフローを反転します。
3. 子供の通常のltrモードへのフローを返します。
4. それは、ただ、方向プロパティは、コンテンツのレイアウトとは対照的に、ヘブライ語のような言語のためのテキストの方向を示すことを意味することに留意してください:)

Answer 2

このトリックは、IE6で動作するかどうか、私は覚えていないことの恵みを与えることを知っていること。

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

Iをあなたは.wrap{float:left;}

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

この方法.prevは.leftを浮かべた後、左の幅を取得する必要があるでしょうとは思いません。

デモ：

ラップで浮動：ラップなしhttp://jsbin.com/exevis

浮動：http://jsbin.com/opehig

Answer 3

を行っています。 ie6の怪物を扱うとき、kizuの答えは非常に賢いですが、条件付きでラップし、ページ上の唯一の開発者であっても必ずハックを記録することをお勧めします。それが必要とするのは数カ月、おそらく数回のマーティンであり、この実装は全く無意味であるように見えます。