html div가 어린이 div를 포함하지 않는 경우

다른 div에 배치하여 몇 개의 div 뒤에 배경을 만들 수 있도록 노력하고 있습니다. 문제는 부모 div가 자식 div의 높이까지 성장하지 않는다는 것입니다. 이 사이트의 콘텐츠가 동적이기 때문에 부모 div가 필요합니다. 나는 그것을 위해 임시 변통을 만들었습니다. div를 세 개의 다른 div와 설정 아래에 두어 모두 명확한 속성을 배치했지만, 그냥 간격을 어둡게합니다. 코드를 heres. 여기 html div가 어린이 div를 포함하지 않는 경우

<div id="content_container" style="clear:both;"> 
     <div id="container_left"> 
      <p>Left Container</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
     </div> 
     <div id="main_body"> 
      <p>Main Bod adf adsf asdf asd asdf asd dadf asd asd y</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
     </div> 
     <div id="container_right"> 
      <p>Right Container</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
     </div> 

    </div>

그리고

는 그런 다음 #content_container 사업부에 clearfix 클래스를 추가 CSS

/* CSS Document */ 
#container { 
    margin:auto; 
    background:#CFF 
} 
#body_container { 
    width:1200px; 
    margin:auto; 
} 
#header { 
    background:#CCC; 
    height:130px; 
} 
#main_header { 
    width:700px; 
    float:left; 
} 
#header_login { 
    margin-top:10px; 
    margin-right:10px; 
    float:right; 
    width:200px; 
} 
#header_login p { 
    margin:0; 
} 
#top_nav { 
    clear:both; 
    background:#06F; 
} 
#container_left { 
    float:left; 
    width:130px; 
} 
#container_right { 
    float:right; 
    width:130px; 
} 
#main_body { 
    margin-left:20px; 
    width:900px; 
    float:left; 
} 
#content_container { 
    background:#FFF; 
} 
#footer { 
    clear:both; 
}

출처

2011-11-27 Shaun

당신은 JSfiddle –

에 넣어해야합니까? JSfiddle이 무엇인지 잘 모르겠습니다. – Shaun

#content_container에 왼쪽으로 플로트 설정을 시도해보십시오. 몇 달 전 비슷한 문제가 있었을 때 메모리가 문제 해결에 도움이된다면. 그것은 단지 직감입니다. 그것이 작동하면 나는 대답으로 게시 할 것입니다. – ClarkeyBoy

Take a look at this article on "How To Clear Floats Without Structural Markup".입니다.

<style type="text/css"> 

    .clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    } 

</style><!-- main stylesheet ends, CC with new stylesheet below... --> 

<!--[if IE]> 
<style type="text/css"> 
    .clearfix { 
    zoom: 1;  /* triggers hasLayout */ 
    } /* Only IE can see inside the conditional comment 
    and read this CSS rule. Don't ever use a normal HTML 
    comment inside the CC or it will close prematurely. */ 
</style> 
<![endif]-->

출처

2011-11-27 22:12:52

링크를 제공해 주셔서 고맙겠 습니다만, float를 부모 div로 고정하면 훨씬 간단합니다. 읽는 좋은 기사 – Shaun

html div가 어린이 div를 포함하지 않는 경우

답변

관련 문제