在上一个兄弟的左边浮动下一个兄弟

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 有一个讨厌的错误，如果它包含 float: right;，它会将浮动到左侧的容器（或者是 inline-block）拉伸。

但是，有一个很少使用的属性direction，可用于此类布局：它完全跨浏览器，您可以将其与inline-blocks 一起使用以获得最佳效果。

所以，对于你的情况，代码是这样的：

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

但 display: inline-block 不适用于 IE，因此您需要通过使其内联但使用 hasLayout 来破解它，因此仅在条件 cmets 中将其添加到 IE：

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

就是这样！

一步一步：

1. 将所有内容都设为内联块，以便在内联流中工作。
2. 在包装器上反转流。
3. 在子级中将流返回到正常的 ltr 模式。
4. 完成了:)

Answer 2

我不记得这个技巧是否适用于 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

Answer 3

请记住，direction 属性旨在指示希伯来语等语言的文本方向，而不是布局内容。虽然 kizu 的回答在处理 ie6 的怪物时非常聪明，但我建议您将其包装在一个条件中并确保记录该 hack，即使您是页面上唯一的开发人员。只需要几个月的时间，也许还有一些马提尼酒就可以启动，而且这种实现看起来很荒谬。