html – 如何将一个元素放在另一个元素下面

2019年7月20日 358次阅读

我刚刚完成了使用Codecademy的
HTML / CSS,这显然是非常基本的,所以我不太了解.其中一个“项目”是制作自己的简历.我从该项目中获取了HTML / CSS,我正在调整它以使简历看起来更好.我现在正试图把一个div – 简历中关于我的职业目标的文本部分 – 在另一个div,标题下.然而,它不起作用. “目标”的div目前位于标题的div后面.我怎么能得到第二个div来实现第一个div下面的目标呢？

我读了一些关于我应该如何将标题div浮动到左边然后放清楚：两者;在目标的div中,但这不起作用.

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>

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

最佳答案 例如：

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

Css with float：

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

带显示屏的Css：

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