当里面有img时,Div没有高度

Question

我有一个div [div1]围绕其他元素.在元素内部,我有一个绝对定位的图像.Div1和元素在它们上面留有浮动并且没有显示高度.有没有办法让这个主要整体div1有一个高度,所以其他元素,如页脚可以浮在它下面.

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

由于所有元素都是浮动的,因此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/获取完整代码