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-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;
    }

就是这样！

一步一步：

制作所有内联块，以便它可以在内联流中使用。
反转包装纸上的流程。
将流程返回到孩子们的正常ltr模式。
已完成：）

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浮动后的剩余宽度。

演示：

使用wrap浮动：http://jsbin.com/exevis

没有换行：http://jsbin.com/opehig

Answer 3

请记住，direction属性用于表示希伯来语等语言的文本方向，而不是布局内容。虽然kizu的答案在处理ie6的怪异时非常聪明，但我建议你将它包装在条件中并确保记录黑客，即使你是页面上唯一的开发人员。所需要的只需几个月，也许还有一些马提尼可以启动，而这种实现似乎是非常荒谬的。

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

3 个答案: