html - 当里面有img时div没有高度

Question

我有一个围绕着其他元素的 div[div1]。在元素内部，我有一个绝对定位的图像。 Div1 和元素在它们上面有 float 并且没有显示高度。有没有办法让主要的整体 div1 有一个高度，以便其他元素(如页脚)可以 float 在它下面。

HTML

<div class="div1">
  <div> <img src="image1.jpg" /> </div>
  <div> <img src="image2.jpg" /> </div>
  <div> <img src="image3.jpg" /> </div>
</div>

CSS

.div1{
   width:100%;
   height:auto;
   overflow:auto;
   float:left;
   }
.div1 div{
   width:100%;
   height:auto;
   overflow:auto;
   float:left;
   }
.div1 div img{
   width:100%;
   height:auto;
   position:absolute;
   display:block;
   float:left;
   }

Answer 1

如果你想让div1有高度，就去掉图片的绝对位置

.div1 div img{
   width: 100%;
   display: block;
   float: left;
}

由于所有元素都是 float 的，因此 div1 将具有高度。您的图像被绝对定位，因此它被从内容流中取出。这与内部没有任何内容的 div 相同，因此您不会获得高度。

http://jsfiddle.net/QDYYw/3/

更新:

使第一张图片不绝对定位，其余图片可以绝对定位，因此它们仍然具有您想要的堆叠效果，并且容器将有一个高度，因为您的一张图片在内容流中。

<div class="div1">
  <img src="image1.jpg" />
  <img src="image2.jpg" />
  <img src="image3.jpg" />
</div>

CSS

.div1 img:first-child {
   position: static;
}

参见 http://jsfiddle.net/QDYYw/4/完整代码