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-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. 完成 ：）
于 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

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

于 2012-04-25T22:07:15.690 回答