前一个兄弟元素左侧的浮动兄弟元素

Question

前一个兄弟元素左侧的浮动兄弟元素

htmlcssinternet-explorer-6css-float

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分作为赏金。

- david

你尝试在wrap类中使用!important了吗？ - lakshmi priya

3个回答

1

只需记住，direction属性旨在指示像希伯来语这样的语言的文本方向，而不是布局内容。虽然kizu的答案在处理ie6的丑陋时非常聪明，我建议您将其包裹在条件中，并确保记录此黑客，即使您是页面上唯一的开发人员。只需几个月，或许再加上几个马提尼酒，这个实现就会显得非常荒谬。

- Brian Douglas Moakley

2

这应该作为评论输入在kizu的答案中，而不是作为单独的答案。 - Doug

非常正确，但我没有直接回复答案的选项。我猜这是某种获得的功能。通常，有人会将我的评论移动到适当的位置。 - Brian Douglas Moakley

哦，我没意识到添加注释是需要获得的。希望你很快就能获得这个特权！ - Doug

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

- Andreas Louv

谢谢Andreas！AL，感谢您的回复，但是文档标记中“next（1）”必须在“previous（2）”之后。 - david

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kizu · Accepted Answer

这是你需要的链接：http://result.dabblet.com/gist/2489753

你不能在此处使用浮动，因为IE有一个讨厌的bug，如果容器左浮动（或为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;
    }

就是这样了！

步骤如下：

将所有元素设置为inline-blocks，这样它们就可以在行内流中工作。
反转包装器上的流程。
在子元素中将流程返回到正常的从左到右模式。
完成啦 :)