我有四个div
元素浮动到左边。第三个div
被清除。
在 Firefox 和 Chrome 中,元素按预期定位:第一个和第二个div
s 彼此相邻,并且位于彼此相邻的第三个和第四个div
s 之上。
另一方面,IE7 将第四个div
与第一个和第二个相邻,div
第三个div
在下面。
我知道我可以通过br
在第二个元素之后添加一个元素来修复它,div
但如果我不需要,我宁愿不编辑标记。有没有更优雅的方法来解决问题?
一段时间以来,我一直在尝试在 Google 上进行修复,但还没有找到一个,考虑到这个问题看起来多么简单,这相当令人惊讶。也许我遗漏了一些明显的东西,是否有一个参考站点列出了像这样的简单 CSS 问题,或者我只是对基本 CSS 一无所知?
编辑:在 Nazgulled “解决”问题后,我使示例代码稍微复杂一些(见评论)。现在有四个div
s 而不是三个,第三个div
被清除而不是第二个。
这是完整的源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>IE Float Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
div
{
width: 100px;
height: 100px;
color: white;
font-size: 3em;
float: left;
}
#divone
{
background-color: red;
}
#divtwo
{
background-color: blue;
}
#divthree
{
background-color: green;
clear: both;
}
#divfour
{
background-color: purple;
}
</style>
</head>
<body>
<div id="divone">one</div>
<div id="divtwo">two</div>
<div id="divthree">three</div>
<div id="divfour">four</div>
</body>
</html>