-1

我正在再次自学 HTML（上次我做这些东西时，人们仍在使用表格）并遇到了一些问题。我试图弄清楚为什么被称为“inset”的 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;
}
4

2 回答 2

1

您正在浮动页面流中的早期元素。当您浮动一个元素时，它不会为其包含元素增加高度，这就是为什么#projectbody div最终会落后div于页面上较早的 's 。您可以通过添加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-27T02:08:13.517 回答
0

将 projectbody div 放在summery 上方。float 在它之前的元素附近工作。

 <div id="projectbody">

     <div id="inset">

        More stuff

     </div>

 </div>

     <!-- Summary section -->

     <div id="summary">

             Some stuff

     </div>

查看示例

于 2013-05-27T02:04:06.307 回答