gpt4 book ai didi

html - 如何垂直排列元素?

转载 作者:太空宇宙 更新时间:2023-11-04 13:02:50 25 4
gpt4 key购买 nike

我是网络开发和设计的新手。如何让这些元素一个接一个地出现?

HTML

<!DOCTYPE html>
<html>
<head>

<meta charset = "UTF-8" />

<title>
Title
</title>

<link rel = "stylesheet" type = "text/css" href = "index.css" />

</head>

<body>
<div id = "Container">
<div id = "Declaration">
<h1>
Hi.
</h1>

<h2>
Bye.
</h2>
</div>

<br />

<div id = "Skills">
Some skills
</div>
</div>
</body>
</html>

CSS

div#Container
{
position: relative;
}

div#Declaration
{
position: absolute;
left: 40%;
padding-top: 250px;
}

div#Skills
{
background-color: rgb(72, 141, 200);
}

h1
{
font-family: "Gotham Narrow";
font-weight: 500;
}

h2
{
font-family: "Gotham Narrow";
font-weight: 300;
}

h3
{
font-family: "Gotham Narrow";
font-weight: 100;
}

我试图将技能容器放在声明下方。但它出现在上面?这里有什么问题吗?

最佳答案

试试下面的代码,这里是 FIDDLE

div#Container {
position: relative;
}
div#Declaration {
//position: absolute;/***Removed**/
left: 40%;
padding-top: 250px;
}
div#Skills {
background-color: rgb(72, 141, 200);
}
h1 {
font-family:"Gotham Narrow";
font-weight: 500;
}
h2 {
font-family:"Gotham Narrow";
font-weight: 300;
}
h3 {
font-family:"Gotham Narrow";
font-weight: 100;
}

关于html - 如何垂直排列元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25339713/

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