1

所以我拥有的是我的主要区域/身体的容器。在那个容器下面是我的页脚容器。我想要的是身体区域根据其中的内容调整它的高度。已指定宽度。我可以以像素为单位指定高度，它可以工作。但是当我将其设置为自动时，页脚会将其置于我的身体容器上方。有人可以告诉我我做错了什么吗？

html:

<div id="inventory"> <!-- BEGIN INVENTORY -->

<ul class= "inventory">
<li>About #  </li>
<li>### </li>
<li>==</li>

</ul>

</div> <!-- END INVENTORY -->

<div id="text"> <!-- BEGIN CONTENT TEXT -->

<h2> About </h2> <br/>

 This is content

</div> <!-- END CONTEXT TEXT -->

<div id="inventory_right"> <!-- BEGIN INVENTORY RIGHT -->

<p class= "inventory_right"> If you have any questions, please do not hesitate to    <br/> <a href= "#"> contact us </a> </p>

</div> <!-- END INVENTORY RIGHT -->

</div> <!-- END CONTENT -->

<div id="footer"> <!-- BEGIN FOOTER -->
<p class="copyright"> Copyright © 2012 | Philip </p>
</div> <!-- END FOOTER -->



</div> <!--END CONTAINER-->
</body>


</html>

CSS：

   #container {
        width: 1200px;
        margin: auto;
    }

    #content_other {


        width: 1200px;
        height: auto;

        }

    #inventory {

        background-image: url(../website/images/inventory.png);
        width: 154px; 
        height: 146px;
        margin-top: 80px;
        margin-left: 140px;
        float:left;
        display: block;

        }

   #inventory_right {

        background-image: url(../website/images/inventory.png);
        width: 154px; 
        height: 146px;
        margin-top: 80px;
        margin-right: 50px;
        float:right;
        display: block;

        }

    #text {

        float: left;
        border-style: solid;
        border-width: 0px;
        width: 600px;
        height: auto;
        margin-top: 80px;
        margin-left: 50px;
        }

    #footer {

        background-image: url(../website/images/footer.png);
        width: 1200px;
        height: 100px;

        }
4

2 回答 2

1

在页脚添加新的 CSS 规则：clear:both；它应该有帮助。

于 2012-08-02T09:01:30.973 回答
1

因为你使用float，给overflow你的父 div 属性，或者使用clear:both

到你的页脚

  #footer
{
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
clear:both;
}

或者

#container {
width: 1200px;
margin: auto;
overflow:hidden;
}
于 2012-08-02T09:07:31.650 回答