浮动下一个兄弟姐妹左边的兄弟姐妹

Question

我不知道如何或是否可以使用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分的赏金

Answer 1

你去了:http://result.dabblet.com/gist/2489753

你不能在那里使用浮动,因为IE有一个令人讨厌的错误,它会拉伸浮动到左边(或是inline-block)的容器,如果它包含float: right;.

但是,有一个很少使用的属性direction,可以用于这样的布局:它是完全跨浏览器,你可以使用它与inline-blocks以获得最佳效果.

所以,对于你的情况,代码将是这样的:

.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. 完成 :)