html - 为什么这些 div 消失了?

标签 html css

我正在尝试创建一个网站,内容位于两个 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>

最佳答案

简单。 CSS 声明名称错误。它应该是 .lWall 和 .rWall 而不是 .lwall 和 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

关于html - 为什么这些 div 消失了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25395110/

相关文章:

javascript - 如何在 selectize.js 中设置默认值?

html - Css force div 填充它和页脚之间的空间

javascript - 使用JavaScript push解析JSON数据——想防止自动关闭div

jquery - 我表格中的所有内容仅出现在一列中

html - 优先考虑两个绝对元素

javascript - 在第一个下拉列表中值有子元素,然后用户在第二个下拉列表中选择相同的值应该使用 jquery 接受

html - 将 "position: relative;"放在哪里?

html - 如何在 div 之后显示内联选择元素?

html - 在 Bootstrap 网格系统中居中图像

css - 如何在函数内部使用 calc()?