在不破坏文本流的情况下清除IE7中的浮动

时间:2011-04-20 16:09:00

标签: html css css-float internet-explorer-7

请参考以下example

要求:

  • 让一个元素浮动。
  • 首先清除另一个元素,然后向左浮动。
  • 有文本流并包装所有浮动元素。

这似乎是一个在布局中使用浮动的简单例子,但似乎没有可能的方法在IE7中这样做。

在给定的示例中,IE7不尊重clear,并且两个元素都浮动到顶部:

    <!-- Floated blocks -->
<div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<div style="float:left; clear:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
    <!-- Wrapping text -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisi tellus. Ut ac iaculis erat. Integer nec turpis mi, quis placerat eros. Donec suscipit eros vel nulla vulputate cursus. Aenean ut augue nisi, a sagittis velit. Mauris eget velit at felis feugiat consequat. Sed interdum lobortis porttitor. Vestibulum ultrices posuere ipsum id posuere.</p>
<p>Nam imperdiet, orci sed faucibus tempus, arcu est pretium mauris, in mollis tellus augue imperdiet elit. Maecenas mi nunc, rhoncus in feugiat et, varius at lacus. Etiam at iaculis libero. Phasellus eu ipsum tortor. Maecenas non purus dolor. Suspendisse risus felis, varius et porttitor eu, ultricies a orci. Nullam ac ipsum diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis suscipit eros consequat sollicitudin. </p> 
<p>Morbi facilisis aliquet rutrum. Vestibulum dignissim neque velit. Nunc auctor, ante nec placerat commodo, metus felis dignissim metus, sit amet aliquet sem nisi eget neque. Morbi diam massa, porttitor ac egestas at, bibendum id mauris. Phasellus at leo at est lobortis ullamcorper at vel dolor. Suspendisse tincidunt lobortis quam a luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id metus id mauris rhoncus adipiscing ac quis arcu. Phasellus magna lectus, venenatis non tempor id, euismod ut quam.</p>
<p>Vivamus gravida dui ut dui facilisis ullamcorper. Nulla facilisi. Nunc eu sagittis ante. Fusce sit amet velit vel lacus congue sodales. Integer sollicitudin varius orci. Sed tellus erat, porttitor a ultricies nec, pellentesque nec felis. Sed at arcu ipsum. Etiam lorem leo, egestas et euismod nec, rhoncus dictum mauris. Fusce vestibulum lectus eget magna sollicitudin vulputate pulvinar augue tempus. Integer urna lacus, tincidunt eget fermentum eu, condimentum et eros. Ut vitae tortor porttitor dui elementum sollicitudin nec a ante.</p>

我愿意接受能够实现预期布局的任何解决方案。谢谢 -

3 个答案:

答案 0 :(得分:2)

我不敢害怕:(

请参阅here了解有关IE7失败的大量测试用例,如果有一个解决方案Bruno将链接到它,我敢肯定。顺便说一下那个页面会带来另一个更多的

简而言之:

clear: both(或方向)将失败,除非前一个浮点数方向相同

我看过一个回合,有些情况下唯一的解决方案是在浮点数之间添加一个额外的元素,但这不适用于你的情况,因为它会将文本推送到插入元素的底部下方

我甚至想不到用脚本模仿它的方法

答案 1 :(得分:2)

由于您的块具有固定的高度,您可以浮动一个0宽度的div,其高度与向右浮动的div相同。

<div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<div style="float:left; display:block; background:transparent; width:0; height:100px;" >&nbsp;</div>
<div style="float:left; clear:both; display:block; background:#FF0000; width:200px; height:100px;" ></div>

答案 2 :(得分:1)

编辑:

我不确定这是否正是您想要的,但在我的IE浏览器中显示“OK”:

    <p><div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisi tellus. Ut ac iaculis erat. Integer nec turpis mi, quis placerat eros. Donec suscipit eros vel nulla vulputate cursus. Aenean ut augue nisi, a sagittis velit. Mauris eget velit at felis feugiat consequat. Sed interdum lobortis porttitor. Vestibulum ultrices posuere ipsum id posuere.</p>

    <div style="float:left; clear:right; display:block; background:#FF0000; width:200px; height:100px;" ></div><p>Nam imperdiet, orci sed faucibus tempus, arcu est pretium mauris, in mollis tellus augue imperdiet elit. Maecenas mi nunc, rhoncus in feugiat et, varius at lacus. Etiam at iaculis libero. Phasellus eu ipsum tortor. Maecenas non purus dolor. Suspendisse risus felis, varius et porttitor eu, ultricies a orci. Nullam ac ipsum diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis suscipit eros consequat sollicitudin. </p> 
    <p>Morbi facilisis aliquet rutrum. Vestibulum dignissim neque velit. Nunc auctor, ante nec placerat commodo, metus felis dignissim metus, sit amet aliquet sem nisi eget neque. Morbi diam massa, porttitor ac egestas at, bibendum id mauris. Phasellus at leo at est lobortis ullamcorper at vel dolor. Suspendisse tincidunt lobortis quam a luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id metus id mauris rhoncus adipiscing ac quis arcu. Phasellus magna lectus, venenatis non tempor id, euismod ut quam.</p>
<p>Vivamus gravida dui ut dui facilisis ullamcorper. Nulla facilisi. Nunc eu sagittis ante. Fusce sit amet velit vel lacus congue sodales. Integer sollicitudin varius orci. Sed tellus erat, porttitor a ultricies nec, pellentesque nec felis. Sed at arcu ipsum. Etiam lorem leo, egestas et euismod nec, rhoncus dictum mauris. Fusce vestibulum lectus eget magna sollicitudin vulputate pulvinar augue tempus. Integer urna lacus, tincidunt eget fermentum eu, condimentum et eros. Ut vitae tortor porttitor dui elementum sollicitudin nec a ante.</p> 

问题是上面的代码是而不是HTML有效,因为不允许将块元素放在内联元素中。如上所述,它可能无法在HTML-valid-way上进行。