Question

我有一个包含多个部门的页面。前3个从顶部向下占据页面的整个宽度170px。接下来是换行符，然后是第四个分区，它应该显示在前面的分区下面。相反，它显示在页面顶部，在3个分区下面。我已经检查并重新检查以确保所有分区都正确关闭，但这不是问题。我将在下面发布相关代码，首先是CSS，然后是HTML，因为我使用的是单独的样式表。

#banleft
{
    padding-top: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    text-align: center;
    width: 200px;
    height: 170px;
}

#bancenter
{
    padding-top: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    text-align: center;
    width: 600px;
    height: 170px;
}

#banright
{
    padding-top: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    text-align: center;
    width: 400px;
    height: 170px;
}

#nav
{
    background-image: url(../media/purplemenubar.jpg);
    background-repeat: no-repeat;
    padding-top: 3px;
    padding-left: 30px;
    padding-right: 90px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 1150px;
    height: 25px;
}

<div id="banleft">Content </div>
<div id="bancenter">Content </div>
<div id="banright">Content </div><br>
<div id="nav" class="cambria3black">Content </div>

值得注意的是：我已经尝试从最终的div中删除该类，但这没有用。此外，当我将实际内容放在“nav”div中时，它会显示在页面上的适当位置。这只是分裂的背景图像，它漂浮在其他分区的顶部和后面。

Answer 1

将clear:both添加到#nav的样式中。

或者，请考虑使用display:inline-block代替float:left。

为什么我的部门在那里？

1 个答案: