2012-08-02 2 views
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; 

     } 

답변

1

, 당신의 부모 DIV에 overflow 속성을 부여하거나 바닥 글에 clear:both

를 사용

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

또는

#container { 
width: 1200px; 
margin: auto; 
overflow:hidden; 
} 
1

것은 바닥 글 새 CSS 규칙을 추가 : 투명 : 모두; 도움이됩니다. 당신이 float을 사용하기 때문에

관련 문제