13

Internet Explorer 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ポイントの報奨金を与えます

4

3 に答える 3

15

どうぞ: http://result.dabblet.com/gist/2489753

そこでフロートを使用することはできません.IEには厄介なバグがありinline-block、float: right;.

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

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

.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. 終わった ：）
于 2012-04-25T13:55:52.460 に答える
1

このトリックが IE6 で機能するかどうかは思い出せません。

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

私はあなたが必要になるとは思わない.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

于 2012-04-22T15:21:48.867 に答える
1

direction プロパティは、コンテンツのレイアウトではなく、ヘブライ語などの言語のテキストの方向を示すことを目的としていることを覚えておいてください。kizu の回答は ie6 の巨大さを扱う際には非常に巧妙ですが、条件付きでラップし、ページ上の唯一の開発者であってもハックを文書化することをお勧めします。起動するのに 2 ～ 3 か月かかり、場合によってはマティーニを数杯飲むだけで済みます。この実装は非常に無意味に見えます。

于 2012-04-25T22:07:15.690 に答える