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/了解完整代码

Answer 2

那是因为花车。 div是一个块元素，始终为100％，因此不需要width: 100%。同时删除display:block（默认情况下div是块），并且您没有绝对的特定原因，也删除它。并且去掉了漂浮物。

如果你想保留所有内容，只需提供你的div position:relative;，绝对总是相对于它找到的第一个relative元素

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

2 个答案: