html - 将下一个 sibling float 到前一个 sibling 的左边

Question

我不知道如何或是否可以使用 Internet Explorer 6 完成此操作。

我试图将下一个 sibling float 到前一个 sibling 的左边

这就是我正在做的，它可以在 chrome 6、opera 9 和 firefox 1+ 上正确显示。

IE6 的问题是 previous (2) float 到最右边(最好放在 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

你不能在那里使用 float ，因为 IE 有一个讨厌的错误，如果它包含 ，它将向左浮动的容器(或者是 inline-block)拉伸(stretch) float :右；。

但是，有一个很少使用的属性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. 将所有内容都制作成内联 block ，这样它就可以在内联流中工作。
2. 反转 wrapper 上的流程。
3. 在 child 中将流程恢复到正常的 ltr 模式。
4. 完成:)