게시물 컨테이너가 작동하지 않는 이유는 무엇입니까?

내 HTML 또는 CSS가 작동하지 않고 컨테이너가 작동하지 않아 이미지 아래에 녹색 막대가 표시되어야합니다. 나는 그것의 자동 이후 그것은 그 div에 물건이 있다는 것을 인정하지 않는다고 너희들이 나를 도와 줄 수 있을까?게시물 컨테이너가 작동하지 않는 이유는 무엇입니까?

jsfiddle

HTML을

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="main2.css"> 
</head> 
<body> 

    <div id="content"> 

     <div id="postcontainer"> 
      <div id="postpicture"> 
       <img src="" width="80px" height="80px"> 
      </div> 
       <div id="right"> 
        <div id="postheader"> 
         <div id="postname"> 
          Sean Allen 
         </div> 
         <div id="postdate"> 
          July 15, 2013 
         </div> 
        <div id="post">sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample </div> 
        </div> 
       </div> 
       <br class="clear" /> 
     </div> 


    </div> 

</body> 
</html>

당신은 #postcontainer을 삭제하지 않은

html, body { 
Padding:0px; 
margin:0px; 
background:#EDEDED; 
} 

#content{ 
width:900px; 
height:auto; 
min-height:1000px; 
background:#FFFFFF; 
} 

#postcontainer{ 
width:auto; 
height:auto; 
background:green; 
} 

#postpicture{ 
width:80px; 
height:80px; 
float:left; 
padding:8px; 
border:2px solid #FFFFFF; 
outline:1px solid #AAAAAA; 
background:yellow; 
} 

#right{ 
width:800px; 
height:auto; 
float:right; 
background:blue; 
} 

#postheader{ 
width:790px; 
height:auto; 
background:red; 
} 

#postname{ 
width:auto; 
height:19px; 
padding:5px; 
padding-top:10px; 
font-weight:600; 
float:left; 
background:brown; 
} 

#postdate{ 
width:auto; 
height:19px; 
padding:5px; 
padding-left:10px; 
padding-top:13px; 
float:left; 
font-size:13px; 
background:purple; 
} 

#post{ 
width:785px; 
height:auto; 
padding-left:15px; 
float:left; 
background:orange; 
}

출처

2013-08-14 Dylan Baker

는 heres는 그것 http://jsfiddle.net/XCyfR/ –

내 CSS -가합니다 (normal flow에서 촬영) 후손을 떠 있기 때문에 필요 - 하나의 해결 방법은 overflow: hidden;을 추가하여 플로팅 된 하위 항목에 대한 새로운 블록 서식 지정 컨텍스트를 만들고 height: auto;은 예상대로 작동합니다. 떠 다니는 요소는 clear이 아니거나 정상적인 흐름의 다른 블록 수준 요소에 의해 인식되지 않습니다 (이해할 수없는 경우 위의 링크를 읽으십시오). 부모에게 새로운 block-formatting context을 제공하십시오.

http://jsfiddle.net/ANhUn/1/

출처

2013-08-14 02:20:31 Adrift

의 미리보기가 당신에게 너무 많은 친구를 주셔서 감사합니다! 나는 didnt한다 도움을위한 그 감사를 알고있다!! –

안녕하세요. 기꺼이 도와 드리겠습니다. – Adrift