html - 如何垂直排列元素?

标签 html css

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

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/

相关文章:

javascript - 使可点击的 div 标题重新排列以响应较小的宽度

html - 为 DIV 内容添加边框

javascript - setAttribute 在 ie 上不起作用,有什么解决方法吗?

html - 为什么人们要这样写 HTML?

html - 条纹 tr 不包括子表

html - 未应用外部 CSS,但粘贴为内部时相同的代码有效

javascript - 将 html 传递给 cookie

javascript - 切换图像的宽度和高度

html - nth-of-type(2) 是针对第一个类型?

javascript - 滚动时如何在水平条后面实现视差