我有点懵。这是一个小网页。
有两个主要的 div-s:top 和 mainBlock。
首先包含一个图像。问题是 Firebug 显示 div#top 的高度等于 0，因此下一个 div mainBlock 向上移动。如果我删除这段代码:
div#logo{
float: left;
}
一切都会开始正常工作，div#mainBlock 将低于 div#top。能否请您解释一下它是如何工作的以及如何以正确的方式避免这种情况？
这是我的代码:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Paralab - Website & interface design, web apps development, usability</title>
<style text="text/css">
html, body{
}
div#logo{
float: left;
}
#top{
width: 100%;
}
#mainBlock{
width:100%;
}
</style>
</head>
<body>
<div id="top">
<div id="logo">
<img alt="logo" src="img/logo.png" />
</div>
</div>
<div id="mainBlock">
Contact Us
</div>
</body>
</html>
最佳答案
您需要清除 float 。有几种方法可以做到这一点，我会看看这个 article on QuirksMode about clearing floats了解更多信息。
关于html - 奇怪的布局行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3001362/