我正在努力学习CSS。到目前为止，我一直落后并使用表格来管理我的页面布局。
我想迁移到 CSS，但在实现这一点时遇到一些问题。
我当前使用表格的页面布局:
我尝试按照下面的代码使用 css 重新创建此布局:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>page layout</title>
<style type="text/css">
html, body {
text-align:center;
}
#wrapper {
margin: 0 auto;
width: 1200px;
text-align:left;}
#header {
height: 100px;
overflow: auto;
background: green;
}
#main {
background: yellow;
float: left;
width: 800px;
height: 400px
}
#menu {
background: red;
float: left;
width: 200px;
height: 200px
}
#pics {
background: brown;
float: left;
width: 200px;
height: 200px
}
#pics {
background: brown;
float: left;
width: 200px;
height: 200px
}
#adverts {
background: pink;
float: left;
width: 200px;
height: 400px
}
#footer {
background: grey;
float: left;
width: 1200px;
height: 100px
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div id="menu">
menu
</div>
<div id="pics">
pics
</div>
<div id="main">
main
</div>
<div id="adverts">
adverts
</div>
<div id="footer">
footer
</div>
</body>
</html>
这会产生以下输出:
正如您所看到的，图片 div 的位置不正确，它应该位于菜单 div 下而不是页面底部？
我的问题是，如何将图片 div 放在正确的位置？其次，如何使整个页面居中？
最后，这是管理页面布局的最佳方法吗？如果我的“主”div 信息太多，会发生什么？它会自动调整其高度以显示所有信息吗？这是溢出:自动允许的吗？
一如既往地感谢您的帮助，
最佳答案
您的 pics div 顺序不正确。它需要出现在 footer div 之前:
你有这个:
<div id="footer">
footer
</div>
<div id="pics">
pics
</div>
你需要这个:
<div id="pics">
pics
</div>
<div id="footer">
footer
</div>
为了让 menu 和 pics div 按您想要的方式排列，请创建一个包含(包含)它们的 div (下面我的 CSS/HTML 中的 menupics)。
此代码的工作方式与上面列出的一样:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>page layout</title>
<style type="text/css">
html, body {
height: 100%;
width:1200px;
text-align:center;
}
#header {
height: 100px;
overflow: auto;
background: green;
}
#main {
background: yellow;
float: left;
width: 800px;
height: 400px;
}
#menupics {
float: left;
width: 200px;
height: 400px;
}
#menu {
background: red;
float: left;
width: 200px;
height: 200px;
}
#pics {
background: brown;
float: left;
width: 200px;
height: 200px;
}
#adverts {
background: pink;
float: left;
width: 200px;
height: 400px;
}
#footer {
background: grey;
float: left;
width: 1200px;
height: 100px
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div id="menupics">
<div id="menu">
menu
</div>
<div id="pics">
pics
</div>
</div>
<div id="main">
main
</div>
<div id="adverts">
adverts
</div>
<div id="footer">
footer
</div>
</body>
</html>
关于CSS版本的表格页面布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12442976/