html - 为什么使用带有％的浮点数时div会消失？

Question

似乎当我使用 float 和 % 作为宽度时，其他 div 消失了

 <div id="banner">
 <div id="container">

      <div class="right">
      <div class="topimage"></div>
      <div class="bottomimage"></div>
      </div>
      <div class="bigimage"></div>

 </div>
 </div>

CSS：

 #banner {
 margin-top: 30px;
 }

 #container {
 width: 80%;
 margin: auto;
 }

 .right {
 Float: right;
 }

 .topimage {
 background: url(img1.jpg) no-repeat;
 background-size: cover;
 width: 20%;
 height: 150px;
 }

 .bottomimage {
 background: url(img2.jpg) no-repeat;
 background-size: cover;
 width: 20%;
 height: 150px;
 }

 .bigimage {
 background: url(imgbig.jpg) no-repeat;
 background-size: cover;
 width: 80%;
 height: 300px;
 }

现在这使得 2 个较小的 div 消失了，奇怪的是，当我在像素上设置 3 个子 div 的宽度时它工作得很好..

Answer 1

使用浮动时，元素采用其中内容的宽度。而且由于您没有任何内容，因此宽度为 0px。所以即使 100% 的 0px 仍然是 0px。

您应该为“浮动 div”添加一些宽度或在空 div 中添加一些内容。

.right {
 float: right;
 width: 50%;
}

演示

Answer 2

您忘记设置正确元素的宽度：

.right {
  float: right;
  width: 20%;
}

现在，只需将子元素的宽度设置为 100%。

.topimage {
  background: url(img1.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 150px;
}

.bottomimage {
  background: url(img2.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 150px;
}