当里面有img时，div没有高度答案

【问题标题】：Div has no height when there is img inside it当里面有img时，div没有高度
【发布时间】：2013-09-23 10:58:10
【问题描述】：

我有一个围绕其他元素的 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;
   }

【问题讨论】：

不要结合 FLOAT 和 POSITION:ABSOLUTE
stackoverflow.com/questions/7817269/… 可能是相关的（甚至是重复的）
您的容器 div 没有高度，因为您的图像是绝对定位的。默认情况下 div 具有自动高度，因此您不需要定义它，除非您尝试从其他地方覆盖它
@Huangism 我将这些图像定位为绝对位置，以便它们堆叠，在我的工作文件中它们是 .pngs，所以这很有意义。绝对的原因是因为图像都在这个 div 中，并且它们是全宽的，以使它们具有响应性。我想知道是否有办法在整体 div 上有一个高度，而里面的图像有绝对值
@mboory 查看我的更新，了解实现您想要的稍微不同的方法

标签： html css

【解决方案1】：

那是因为浮动。 div 是块元素，总是 100%，所以不需要width: 100%。还要删除display:block（默认情况下，div 是块）并且你没有绝对的具体原因，也删除它。并且当然删除浮动。

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

【讨论】：

floats 与此无关，所有的 div 和图像都是浮动的，因此容器会有一个高度，问题是绝对定位的图像
刚得到更新，这里提出了野蛮的解决方案。

【解决方案2】：

如果您希望 div1 具有高度，则从图像中删除绝对位置

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

由于所有元素都是浮动的，因此 div1 将具有高度。您的图像被绝对定位，因此它被从内容流中取出。这和你的 div 里面没有任何内容一样，所以你没有得到高度。

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

更新：

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

<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/

【讨论】：