如何将一个<div>元素放置在另一个<div>元素下方

Question

我刚刚完成了Codecademy的HTML/CSS课程。其中的一个“项目”是制作自己的简历。我使用了那个项目的HTML/CSS，并对其进行了调整以使简历看起来更好。我目前尝试将一个

放在另一个

下面，前者是我的职业目标的文本部分，后者是

。然而，它没有奏效。关于“目标”的

目前位于

的

之后。我该如何才能让第二个关于目标的

显示在第一个

下面呢？

我读到了一些有关如何将

向左浮动，然后在目标的

中放置的内容，但这不能解决问题。

HTML

<div id="header">
        <p id="name">My Name</p>
        <a href="mailto:[e-mail]"><p id="email">[e-mail]</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: [phone]</p>
    </div>

CSS

div {
border-radius: 5px;
}

#header {
z-index:1;
position: fixed;
width: 98%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
float:left;
}

#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;
}

- user5442867

Answer 1

例如：

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

Css 浮动布局：

 .div1 {
     float: none; 
  }
  .div2 {
     float: none; 
  }

Css with display:

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

- The Beast

Answer 2

Here is the updated HTML :

<div id="header">
    <p id="name">My Name</p>
    <a href="mailto:[e-mail]"><p id="email">[e-mail]</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: [phone]</p>
</div>

这将显示位于标题div下方的目标div。

此外，这是一个链接供您参考。

- Senjuti Mahapatra

Answer 3

这里是更新的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 里空出一块

DEMO

- Fiido93

Answer 4

我认为使用Bootstrap更容易，这是链接http://getbootstrap.com/css/

Bootstrap的作用是创建包裹网站内容的容器。它将网站分成行。为此，您需要使用

和标签。使用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>

- George Sanchez