gpt4 book ai didi

html - 基本的 HTML 布局

转载 作者:技术小花猫 更新时间:2023-10-29 11:49:03 25 4
gpt4 key购买 nike

我正在尝试实现一个简单的布局,如下所示:

 _________________________
| | 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com