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

使用float时，元素将获取内容的宽度。由于你没有任何内容，宽度为0px。所以即使100％的0px仍然是0px。

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

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

Demo

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;
}

使用％with％时为什么div会消失？

2 个答案: