我正在尝试实现一个简单的布局，如下所示:
_________________________
| | header | |
| L |_____________| R |
| | | |
| | | |
| | | |
| | main | |
| | | |
| | | |
| | | |
|_____|_____________|_____|
我开发了这段代码来实现我的目标:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<style>
* {
margin: 0px;
padding: 0px;
}
p {
text-align: center;
}
div#left {
float: left;
background-color: #777;
width: 200px;
height: 650px;
}
div#header {
float: left;
background-color: #eee;
width: 940px;
height: 60px;
}
div#main {
float: left;
width: 940px;
}
div#right {
float: right;
background-color: #777;
width: 200px;
height: 650px;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="header">
<p>Header</p>
</div>
<div id="main">
<p>Main</p>
</div>
<div id="right">
<p>Right</p>
</div>
</body>
但我无法让“正确”列与顶部对齐。有人可以指出我的 CSS 中要更改的内容以更正此问题吗？ 谢谢!
最佳答案
将右侧的列移到 HTML 的顶部:
<body>
<div id="right">
<p>Right</p>
</div>
<div id="left">
<p>Left</p>
</div>
<div id="header">
<p>Header</p>
</div>
<div id="main">
<p>Main</p>
</div>
</body>
关于html - 基本的 HTML 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10755476/