Question

所以我拥有的是我的主要区域/身体的容器。在那个容器下面是我的页脚容器。我想要的是身体区域根据其中的内容调整其高度。已指定宽度。我可以指定像素的高度，它的工作原理。但当我把它放到汽车时，页脚会将自己置于我的身体容器上方。谁能告诉我我做错了什么？

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;

        }

Answer 1

向页脚添加新的CSS规则：clear：both; 它应该有所帮助。

Answer 2

由于您使用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; }

身高：自动;运作不好

2 个答案: