html - 重ねる - 次の兄弟を前の兄弟の左にフロートさせる




float left サルワカ (2)

directionプロパティは、コンテンツをレイアウトするのではなく、ヘブライ語などの言語のテキストの方向を示すためのものです。 ie6の怪物を扱うとききずの答えは非常に賢いですが、私はあなたが条件付きでそれを包み、あなたがページ上の唯一の開発者であっても必ずハックを文書化することをお勧めします。 それに必要なのは数ヶ月で、起動するまでに数分かかるかもしれませんが、この実装はまったく無意味なようです。

インターネットエクスプローラ6を使ってこれを実行する方法や方法がわからない。

次の兄弟を前の兄弟の左に浮かべるようにしています

これは私がやっていることであり、それはクロム6、オペラ9およびFirefox 1+で正しく表示されます。

IE6の問題は、 previous (2)が一番右に浮いていることです(ここでは、ページの左側にあるnext (1)横にあるのが最善です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ポイントの恩恵を与えます


ここに行きます: http://result.dabblet.com/gist/2489753 : http://result.dabblet.com/gist/2489753

フロートを使用することはできません。IEには、フロートが含まれているとコンテナが左に浮き上がる(またはinline-block )という厄介なバグが発生しfloat: right;

ただし、このようなレイアウトに使用できることはめったに使用されないプロパティのdirectionがあります。それは完全にクロスブラウザであり、 inline-blockと共に使用すると最高の効果が得られます。

したがって、あなたの場合は、コードは次のようになります。

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

しかしdisplay: inline-blockはそのままではIEには使えませんので、インラインではなくhasLayoutを使ってそれをハックする必要があるので、条件付きコメントでのみそれらをIEに追加します。

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

それでおしまい!

ステップバイステップ:

  1. すべてインラインブロックにすると、インラインフローで機能します。
  2. ラッパーの流れを逆にします。
  3. 子の通常のltrモードにフローを戻します。
  4. 完了しました :)






css-float