div 내에서 div를 중첩시키지 못했습니다.

-1

저는 HTML을 다시 가르치는 중이며 (이 작업을 마지막으로 수행 한 사람은 여전히 테이블을 사용하고있었습니다) 몇 가지 문제가 있습니다. 나는 "inset"으로 알려진 div가 왜 나타나지 않는지 알아 내려고하고있다. 분홍색 상자 안에는 검은 상자가 있어야하지만 나타나지 않아야합니다. 누락 된 것이 무엇입니까?div 내에서 div를 중첩시키지 못했습니다.

다음은 HTML 파일과 CSS입니다.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Page</title> 
     <link rel="stylesheet" type="text/css" href="main.css" /> 
    </head> 

    <body> 
     <!-- Wrapper --> 
     <div id="wrapper"> 
      <!-- Project banner --> 
      <div id="projectbanner"> <a href="#">Banner</a> 
      </div> 
      <!-- Project data --> 
      <div id="projectdata">Data</div> 
      <!-- Summary section --> 
      <div id="summary">Some stuff</div> 
      <!-- Project body --> 
      <div id="projectbody"> 
       <div id="inset">More stuff</div> 
      </div> 
      <!-- Footer --> 
      <div id="footer">This is the Footer</div> 
     </div> 
     <!-- End Wrapper --> 
    </body> 
</html>

CSS

* { padding: 0; margin: 0; } 

body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 13px; 
} 
#wrapper { 
margin: 0 auto; 
width: 1050px; 
} 

#projectbanner { 
color: #333; 
background: #E7E7E7; 
margin: 0px 0px 0px 0px; 
padding: 0px; 
width: 750px; 
height: 310px; 
float: left; 
} 

#projectdata { 
color: #333; 
background: #888888; 
margin: 0px 0px 0px 0px; 
width: 300px; 
height: 510px; 
float: right; 
} 

#summary { 
color: #333; 
background: #666666; 
margin: 0px 0px 0px 0px; 
width: 750px; 
height: 200px; 
float: left; 
} 

#projectbody { 
width: 1050px; 
color: #333; 
border: 0px solid #ccc; 
background: #F2BBE6; 
margin: 0px 0px 0px 0px; 
height: 850px; 
} 

#inset { 
width: 800px; 
color: #fff; 
border: 0px solid #ccc; 
background: #000000; 
margin: 0px 0px 0px 0px; 
height: 350px; 
} 

#footer { 
color: #333; 
width: 1050px; 
border: 0px solid #ccc; 
background: #BDBB8C; 
margin: 0px 0px 0px 0px; 
padding: 0px; 
}

출처

2013-05-27 JClaussFTW

이 페이지를 볼 방법이 있나요입니까? http://jsfiddle.net/a2EWC/ – karthikr

은 여름 위의 projectbody의 DIV를 가져 가라. float는 앞에있는 요소 근처에서 작동합니다.

<div id="projectbody"> 

    <div id="inset"> 

     More stuff 

    </div> 

</div> 

    <!-- Summary section --> 

    <div id="summary"> 

      Some stuff 

    </div>

당신은 페이지 흐름에서 이전 요소를 부유하는 example

출처

2013-05-27 02:04:06 WhyMe

를 참조하십시오. 요소를 플로트 할 때 요소가 포함 된 요소에 높이가 추가되지 않으므로 #projectbody div이 페이지의 앞부분 인 div의 뒤쪽에서 끝납니다. #projectbody div에 clear: both을 추가하여 문제를 해결할 수 있습니다.

#projectbody { 
    width: 1050px; 
    color: #333; 
    border: 0px solid #ccc; 
    background: #F2BBE6; 
    margin: 0px 0px 0px 0px; 
    height: 850px; 
    clear: both; 
}

는 여기 jsFiddle

출처

2013-05-27 02:08:13

div 내에서 div를 중첩시키지 못했습니다.

답변

관련 문제