html - 如何将一个 div 放在另一个下面？

Question

我在将“socials”div 放置在“nav”div 下时遇到了一些问题。我错过了什么？这是我的 html

#nav{
background-color: #fcb254;
height: auto;
width: 20%;
background-color: #fcb254;
margin-left: 5px;
margin-top: 5px;
border-radius: ;
border: solid 3px #f19828;
float: left;
}
#nav ul{
padding: 5px;
}
#nav ul li{
display: block;
padding: 10px 0px 10px 0px;
font-size: 23px;
}
#nav ul li a{
color: white;
text-decoration: none;
}
#nav ul li:hover{
background-color: #3c79a1;
}

#socials {
background-color: #fcb254;
height: auto;
width: 20%;
background-color: #fcb254;
margin-left: 5px;
margin-top: 5px;
border-radius: ;
border: solid 3px #f19828;
float: left;
clear: left;
}

<div id="socials">
    <center>
        <a href="#" class="fa fa-facebook"></a>
    </center>
</div>

<div id="nav">
    <center>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Posts</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Sign Up/Log In</a></li>
        <li><a href="#">Other</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    </center>
</div>

对于代码垃圾邮件感到抱歉，但我对这个编码行业还很陌生，所以我正在尽力而为

编辑:“clear: left;”标签有效，但如果您明白我的意思， body 的位置太低了。

Answer 1

您需要从 nav 元素中删除 float: left; 并将 display: block; 添加到 #nav 和 #socials.

根据定义，Block 级别的元素不会位于行内，而是会突破它们。默认情况下(未设置宽度)它们会占用尽可能多的水平空间。

HTML:

<div id="socials">
    <a href="#" class="fa fa-facebook"></a>
</div>

<div id="nav">
    <center>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Posts</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Sign Up/Log In</a></li>
            <li><a href="#">Other</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </center>
</div>

应用 CSS:

#nav{
    background-color: #fcb254;
    height: auto;
    width: 20%;
    margin-left: 5px;
    margin-top: 5px;
    border: solid 3px #f19828;
    display: block;
}
#socials {
    background-color: #fcb254;
    height: auto;
    width: 20%;
    background-color: #fcb254;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: ;
    border: solid 3px #f19828;
    display: block;
}

我的结果:

查找有关显示属性的更多信息 here .