奇怪的布局行为
问题描述:
我有点困惑。这是一个小型网页。 有两个主要的div-s:top和mainBlock。
首先包含图像。问题是,萤火虫显示div#top的高度等于0,因此下一个div mainBlock向上移动。如果我删除这段代码:奇怪的布局行为
div#logo{
float: left;
}
一切都将开始工作正常和div#mainBlock将低于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>
<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>
答
你需要清除浮动。有几种方法可以做到这一点,我会检查这欲了解更多信息。
答
浮动图像离开文档的流程。设置#top {overflow:hidden;}
答
我强烈建议您使用严格的doctype而不是过渡。您将在各种浏览器中获得更一致的行为。
谢谢,特别是对于这篇文章。现在我明白了这一点! – andrii 2010-06-08 21:34:46