Question

我正在重新教授自己的HTML（上次我做这些事情，人们还在使用表格）并遇到了一些问题。我想弄清楚为什么被称为“插图”的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;
}

Answer 1

您正在浮动页面流中的早期元素。当您浮动元素时，它不会向其包含元素添加高度，这就是#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

Answer 2

将项目体div放在夏日之上。 float在它之前的元素附近工作。

 <div id="projectbody">

     <div id="inset">

        More stuff

     </div>

 </div>

     <!-- Summary section -->

     <div id="summary">

             Some stuff

     </div>

请参阅example

在div中嵌入div是行不通的

2 个答案: