在div中嵌套div無法正常工作

-1

我正在重新教導自己的HTML（上一次我做了這些事，人們仍在使用表）並遇到了一些問題。我試圖找出爲什麼稱爲「插入」的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 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的原因。您可以通過將clear: both添加到#projectbody div來解決此問題。

#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無法正常工作

回答

相關問題