Html 如何放置一个<；部门>；元素低于另一个<；部门>；

我刚刚用Codecademy完成了HTML/CSS。其中一个“项目”是制作自己的简历。我从那个项目中获取了HTML/CSS，我正在调整它以使简历看起来更好。我目前正试图在另一个

div

标题下放置一个

div

，这是简历中关于我职业目标的文本部分。然而，这是行不通的。“目标”的

div

当前位于标题的

div

后面。我究竟如何获得第二个

div

，以实现在第一个

div

下面的目标

我读了一些关于如何将

float

标题div放在左侧，然后将

清除：两者都放div

中输入code>，但这不起作用

HTML

<div id="header">
        <p id="name">My Name</p>
        <a href="mailto:myemail@email.com"><p id="email">myemail@email.com</p></a>
    </div>
    
    <div id="objective"></div>
    
    
    <div class="left"></div>
    <div class="right"></div>
    
    <div id="footer">
        <p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
    </div>

例如：

 <div class="div1">KSD;JSFAJ;SSD;</div>
 <div class="div2">KSD;JSFAJ;SSdfaD;</div>

带显示的Css：

 .div1 {
     display: inline;
  }
  .div2 {
     display: inline; 
  }

---

以下是更新的HTML：

<div id="header">
    <p id="name">My Name</p>
    <a href="mailto:myemail@email.com"><p id="email">myemail@email.com</p></a>
</div>
<div style="height:50px;width:98%;">
</div>
<div id="objective">Objective goes here</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
    <p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>

我的名字
目标在这里
纽约布鲁克林Anywhere街1234号11216 |电话：（123）456-7890

这将在

标题div

下方显示

目标div

---

这也是一个供您参考的文件。

这里是更新CSS，这显示了您的html的响应性

*{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
                div {
            border-radius: 5px;
            }

            #header {
            width: 98%;
            margin: 0 auto;
            height: 60px;
            background-color: #668284;
            margin-bottom: 10px;
            }

            #name {
            float:left;
            margin-left: 5px;
            padding-top: 5px;
            font-size: 16px;
            font-family: Verdana, sans-serif;
            color: #ffffff;
            }

            #email{
            float:right;
            margin-right: 5px;
            padding-top: 5px;
            font-size: 16px;
            font-family: Verdana, sans-serif;
            color: #ffffff;
            }


            .right p {
            margin-left: 5px;
            margin-right: 5px;
            margin-top: -10px;
            font-family: Garamond, serif;
            color: #000000;
            }


            a:hover {
            font-weight: bold;
            }

            #objective {
            height: 50px;
            background-color: #668284;
            font-family: Verdana, sans-serif;
            font-size: 14px;
            text-align: center;
            clear:both;
            color: #ffffff;
            }


            .left {
            position: relative;
            float: left;
            margin-top: 50px;
            width: 49%;
            height: 400px;
            background-color: #B9D7D9;
            margin-bottom: 10px;
            }

            .right {
            position: relative;
            float: right;
            margin-top: 50px;
            width: 49%;
            height: 400px;
            background-color: #F4EBC3;
            margin-bottom: 10px;
            }

            #footer {
            position: relative;
            height: 50px;
            background-color: #668284;
            clear: both;
            font-family: Verdana, sans-serif;
            font-size: 14px;
            text-align: center;
            color: #ffffff;
            }

            #footer p {
            position: relative;
            padding-top: 15px;
            }

永远不要忘记添加此代码

  *{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

这样你的div就不会有空的空间了

---

我认为使用引导更容易，下面是链接

bootstrap的作用是创建包装站点内容的容器。它将站点按行划分。要做到这一点，你需要和。使用此引导程序，您可以将行划分为12个单元格

下面是我如何将我的投资组合划分为3列（共4个空格）的示例

<div class="row">
        <div class="col-md-12">
          <hr>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-4">
          <h3 class="text-body"><u>Block vs Inline</u>
          </h3>
            <p class="p-text"><span>Block Elements</span> are those who take the complete line and full width of the page creating a "box".<br>
              <span>Inline Elements</span> are those who doesn´t affect the layout, just the element inside the tag.
            </p>
        </div>
        <div class="col-md-4">
          <h3 class="text-body"><u>Selectors</u></h3>
            <p class="p-text"><span>Class selectors</span> are used to target elements with specific attributes<br>On the other hand, <span>id selectors</span> are just for unique elements.</p>
        </div>
        <div class="col-md-4">
          <h3 class="text-body"><u>Responsive Layout</u></h3>
          <p class="p-text"><span>Responsive Layout</span> is the combination of html and css design to make the website look good in terms of enlargement, shrink and width in any screen (<em>computers, laptops, netbooks, tablets, phones</em>). </p>
        </div>
      </div>

块与内联
块元素是那些占据页面完整行和全宽的元素，创建一个“框”。

内联元素是那些不影响布局的元素，只是标记中的元素。

选择器
类选择器用于针对具有特定属性的元素
另一方面，id选择器仅用于唯一元素
响应布局
响应式布局是html和css设计的结合，可使网站在任何屏幕（电脑、笔记本电脑、上网本、平板电脑、手机）上的放大、缩小和宽度看起来都很好

  *{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

<div class="row">
        <div class="col-md-12">
          <hr>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-4">
          <h3 class="text-body"><u>Block vs Inline</u>
          </h3>
            <p class="p-text"><span>Block Elements</span> are those who take the complete line and full width of the page creating a "box".<br>
              <span>Inline Elements</span> are those who doesn´t affect the layout, just the element inside the tag.
            </p>
        </div>
        <div class="col-md-4">
          <h3 class="text-body"><u>Selectors</u></h3>
            <p class="p-text"><span>Class selectors</span> are used to target elements with specific attributes<br>On the other hand, <span>id selectors</span> are just for unique elements.</p>
        </div>
        <div class="col-md-4">
          <h3 class="text-body"><u>Responsive Layout</u></h3>
          <p class="p-text"><span>Responsive Layout</span> is the combination of html and css design to make the website look good in terms of enlargement, shrink and width in any screen (<em>computers, laptops, netbooks, tablets, phones</em>). </p>
        </div>
      </div>