请参阅下面的标记+ CSS,或此小提琴:
IE7中的http://jsfiddle.net/gq9w6/15/ ...(或IE8 / 9兼容性视图)

“ Lorem ipsum”文本应环绕div#1和#3,但在IE7中,它将清除div#1。

在这种情况下,如何使IE7正常运行?

HTML:

<div id="div1">Feature image</div>
<div id="div2">
    <div id="div4" class="a">fb like</div>
    <div id="div5" class="a">g-plus1</div>
    <div id="div5" class="a">tweet</div>
</div>
<div id="div3">related topics list</div>
<div id="div7">bi-line</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


CSS:

#div1{border:1px dotted green;float:left;width:100px;height:100px;}
#div2{height:15px;}
#div3{float:right;clear:both;width:100px;height:30px;border:1px dotted green;}
.a{float:left;width:70px;border:1px dotted red;}
#div7{text-align:left;}


更新:
HTML / CSS和(/ 14)都已用示例文本更新,这些文本显示了每个div的目标。

更新
书面要求说明:


特色图片漂浮在左侧
图像右侧的一系列社交媒体共享按钮,在水平行中,该行的顶部与特色图像的顶部对齐
社交媒体按钮下方的一条划线(它们没有正确地放在小提琴中,但是没关系,这很容易修复)
“相关主题”小部件向右浮动,清除了特色图片(前者的顶部边缘与后者的底部边缘对齐)
文章文字从以下一行开始,环绕其余的特色图片以及相关主题小部件

最佳答案

在您的代码中,#div1浮动到左侧,这从文档流中移出,而#div2占据了空间,尽管内容是由浮动推动的。您的#div3实际上正在清除所有浮动,并且浮动在右侧(这是它与#div1底部处于同一水平的原因。不确定#div7在做什么。它也应该浮动吗?

您想达到什么目的?

如果将float: left添加到#div2#div7并将clear: both#div3删除,则在所有浏览器中都将得到相同的结果。

10-07 19:05
查看更多