html - CSS不显示div标签的背景色

我把我的divid="banner"和样式给它的颜色匹配的图像，但颜色不显示。那么，我该怎么办？

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
#banner {
  background-color: #78c8f0;
}

<div id="page">
  <div id="banner">
    <div id="cloud">
      <img src="Cloud4.gif" />
    </div>
    <!--cloud-->
    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->
</div>
<!--page-->

最佳答案

只要给#banner一些高度。请看片段。

#banner {
  background-color: #78c8f0;
  height: 40px;
}

片段

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
#banner {
  background-color: #78c8f0;
  height: 40px;
}

<div id="page">
  <div id="banner">
    <div id="cloud">
      <img src="Cloud4.gif" />
    </div>
    <!--cloud-->

    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->
</div>
<!--page-->

关于html - CSS不显示div标签的背景色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35382094/