Question

我正在尝试创建一个网站，内容位于两个div列之间，标记为lwall和rwall，但我不能让我的两个div显示出来。他们为什么会消失，我将来如何防止这种情况发生？

<!DOCTYPE html>
<html>
<head>
<style>
  body{
    margin:auto;
    background-color: maroon;
  }
  .head{
    margin:auto;
    text-align:center;
    color:#00a2e8;
    background-color:maroon;
    width:750px;
  }
  .nav{
    background-color:maroon;
    width:750px;
    margin:auto;
    text-align:left;
  }
  .nav ul{
    margin:auto;
    padding:0px;
    text-align:center;
  }
  .nav li{
    display:inline;
    list-style-type:none;
    padding:20px;
  }
  .nav a{
    display:inline;
    background-color:maroon;
    color:white;
    text-decoration:none;
  }
  .nav a:hover{
    display:inline;
    color:#00a2e8;
    text-decoration:none;
  }
  .content{
    background-color:white;
    margin:auto;
    width:750px;
  }
  .content img{
    width:200px;
    height:250px;
  }

  .content ul{
    text-align:center;
    padding:20px;
  }
  .content ul li{
    display:table-cell;
    list-style:none;
  }
  .content ul li p{
    padding:10px;
  }
  .lwall{
    float:right;
    background-color:blue;
    height:50px;
    width:50px;
    background-repeat: repeat;
  }
  .rwall{
    float:left;
    background-color:blue;
    height:50px;
    width:50px;
    background-repeat: repeat;
  }
  .foot{}
</style>
</head>
<body>
<div class="head">
  <h1>Sea Aggie Brothers & Sisters</h1>
</div>
<div class="nav">
      <hr>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="news.html">Services</a></li>
        <li><a href="contacts.html">Downloads</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="calendar.html">Calendar</a></li>
      </ul>
      <hr>
</div>  
<div class="lWall">

</div>
<div class="rWall">

</div>
      <div class="content">

          <ul>
            <li><div class="tbox">
              <img src="Calendar.jpg" >
              <h2>Calendar</h2>
              <p>Check here to moniter meetings and other events. Additionally this calendar can be synchronized with other calendar programs.</p>
          </div></li>
            <li><div class="tbox">
            <img src="Calendar.jpg" >
              <h2>Resources</h2>
              <p>When you join BASS you not only benafit from a strong community but also from our club resources such as our class notes & study guide database.</p>
          </div></li>
            <li><div class="tbox">
            <img src="Contact.jpg" >
              <h2>Newsfeed</h2>
              <p>Catch up on the latest club news. Check here for anouncments and details on recent club events. This feed is also availible on facebook.</p>
          </div></li>
          </ul>

      </div>
</body>
</html>

Answer 1

简单。 CSS声明名称错误。它应该是.lWall and .rWall而不是.lwall and rwall。 HTML标记不区分大小写。但自定义CSS名称区分大小写。

 .lWall{
float:right;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
.rWall{
float:left;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}

或者更改您的HTML代码，如下所示。

 <div class="lwall">

 </div>
 <div class="rwall">

 </div>

DEMO

Answer 2

你只需要修复你的css中的两件事，。墙（插入空格）然后{...}和.all（插入空格）{..}

为什么这些div消失了？

2 个答案: