Question

我有以下HTML页面，内容的背景颜色与主体背景颜色没有区别。我一直盯着这个看了一个多小时，找不到错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
</head>

<body>

<div class="container">
  <div class="header"><img src="logo.png" width="35%" height="90" style="background: #A9B92E; display:block;" /> 
    <!-- end .header --></div>

  <div class="sidebar1">
    <ul class="nav">
      <li><a href="home.php">Home</a></li>
      <li><a href="search.php">Search</a></li>
      <li><a href="codebook.php">Tag Codebook</a></li>
      <li><a href="articleadmin.php">Article Admin.</a></li>
    </ul>
    <p>&nbsp;</p>
    <!-- end .sidebar1 --></div>

  <div class="content">
      <form id="form" name="form" action="" method="post">
      <input type="hidden" name="id" value="<?php echo $id; ?>"/>
        <h1>Edit Details for &nbsp; &nbsp;<?php echo $articletitle; ?></h1>
        <table width="100%" border="0" cellpadding="6">
          <tr align="center" valign="middle">
            <td colspan="2"><legend>Article details</legend></td>
          </tr>
          <tr>
            <td width="26%" align="right"><span class="field">Article Title</span></td>
            <td width="74%" align="left"><span class="field">
              <input name="articletitle" type="text" value="<?php echo $articletitle; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Author</span></td>
            <td align="left"><span class="field">
              <input name="articleorganization" type="text" value="<?php echo $articleorganization; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Date</span></td>
            <td align="left"><span class="field">
              <input name="articledate" type="text" value="<?php echo $articledate; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Url:</span></td>
            <td align="left"><span class="field">
              <input name="articleurl" type="text" value="<?php echo $articleurl; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Tags:</span></td>
            <td align="left"><span class="field">
              <input name="articletags" type="text" value="<?php echo $articletags; ?>" size="50"/>
            </span></td>
          </tr>
          <tr align="center" valign="middle">
            <td colspan="2"><input type="submit" name="submit" value="Submit" /></td>
          </tr>
        </table>
          </div>
       </form>
    </div>
  </div>
  <div class="footer">
    <p>My Footer</p>
    <!-- end .footer --></div>
</body>
</html>

Answer 1

查看CSS后，您尚未定义内容类的背景颜色

   .content {
    padding: 10px 0;
    width: 80%;
    float: left;
   }

我建议您使用 ID rahter而不是 Class ，因为您的内容div是唯一的。

修改

我认为你的意思是为什么div类容器没有显示它背景颜色= #FFF; ？抱歉错误你的问题，你应该添加.container css。

overflow: hidden;

Answer 2

此时你需要清除花车 - 在我的代码中添加<div style="clear:both;"></div>。

    </form>
    <div style="clear:both;"></div>
    </div>      
  </div>
  <div class="footer">

演示：http://jsfiddle.net/UAbe9/1/

内容<div>背景颜色不正确</div>

2 个答案: