html – 浮动下一个兄弟姐妹以前的兄弟姐妹的左边

前端之家收集整理的这篇文章主要介绍了html – 浮动下一个兄弟姐妹以前的兄弟姐妹的左边前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不知道如何或者如果这可以用互联网浏览器6完成.

我想把下一个兄弟姐妹漂浮在以前的兄弟姐妹的左边

这是我做的,它正确显示chrome 6,opera 9和firefox 1.

IE6的问题是前一个(2)浮动到最右边(最好在页面左侧的下一个(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点的赏金

解决方法

你去: http://result.dabblet.com/gist/2489753

你不能在那里使用浮点数,因为IE有一个讨厌的bug,如果它包含float,则它将拖放到左边的浮动容器(或者是inline-block).

然而,有一个很少使用的属性方向,可以用于这样的布局:它是完全跨浏览器,您可以使用内联块来获得最佳效果.

所以,对于你的情况,代码将是这样的:

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

但是显示:inline-block不适用于IE,因此您需要通过使用inLayout进行内联攻击,因此将其添加到仅限于条件注释的IE中:

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

而已!

一步步:

>使所有内联块,所以它将工作在内联流.>反转包装纸上的流动.>将流程返回到孩子们的正常的ltr模式.>完成了:)

猜你在找的HTML相关文章