如何让div一个在上一个在下

Question

我想让顶杆接触超大屏幕，但不确定如何。还有一个问题。 headbar 应该称为 navbar 还是没有什么区别？这是我的 HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CherryPlaysRoblox1</title>
        <link rel="stylesheet" type="text/css" href="basic.css">
        <link href="https://fonts.googleapis.com/css?family=Happy+Monkey" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="headbar"> <p>CherryPlaysRoblox</p></div>
        <div class="jumbotron">
            <h1>Welcome!</h1>
            <p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is        that advertising???)</p>
        </div>
        <h2 id="Firsth2">About me</h2>
    </body>
</html>

还有我的Css：

p {
    color: black;
}

.jumbotron {
    background-color: Sandybrown !important;
    float: top;
}

.jumbotron, p + h1 {
    color: black !important;
}

.headbar p {
    color: black !important;
    font-family: 'Happy Monkey', cursive;
    font-size: 20px;
}

.headbar {
    margin-bottom: 30px;
    background-color: hotpink !important;
}
#Firsth2 {
    color: black;
}

body {
    background-color: Peachpuff !important;
}

Answer 1

您正在为 .headbar 使用 p，它有 margin-bottom。要么不要使用 p 要么去掉 margin-bottom.

HTML:

<div class="headbar">CherryPlaysRoblox</div>

参见：https://jsfiddle.net/y1tytq8u/

Answer 2

从 .headbar 中删除 margin-bottom: 30px; 并在 .headbar p 中设置 margin:0:

p {
color: black;
}

.jumbotron {
background-color: Sandybrown !important;
  

}

.jumbotron, p + h1 {
color: black !important;
   
}

.headbar p {
color: black !important;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
   margin:0;
}

.headbar {
background-color: hotpink !important;
}
#Firsth2 {
color: black;
}

body {
background-color: Peachpuff !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <body>
    <div class="headbar"> <p>CherryPlaysRoblox</p></div>
    <div class="jumbotron">
    <h1>Welcome!</h1>
    <p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is        that advertising???)</p>
</div>
    <h2 id="Firsth2">About me</h2>
    </body>

如何让div一个在上一个在下

How to make a div one on the top and one on the bottom touching

html

css