0

我有一个包含多个部门的页面。前 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 中删除该类，但这没有帮助。此外，当我将实际内容放入“导航”div 时，它会显示在页面上的适当位置。它只是浮动到顶部和其他分区后面的分区的背景图像。

4

1 回答 1

1

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

或者，考虑使用display:inline-block而不是float:left.

于 2013-03-09T01:52:06.200 回答