Div里面没有img时没有高度 [英] Div has no height when there is img inside it

问题描述

我有一个围绕其他元素的div [div1]。内部的元素我有一个图像，是定位的绝对。 Div1和元素有浮动左边，并没有显示高度。是否有这样的方法，所以主要的整体div1有一个高度，所以像脚注之类的其他元素可以浮动在它下面。

I have a div[div1] that is surrounding other elements. Inside the elements I have an image that is positioned absolute. Div1 and the elements have float left on them and are showing no height. Is there a way to have this so the main overall div1 has a height so other elements like footers can be floated below it.

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

推荐答案

a height，then remove the position absolute from the images

If you want div1 to have a height, then remove the position absolute from the images

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

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

Since all your elements are floating, the div1 will have a height. Your images were positioned absolutely so it is taken out of the content flow. This is the same as your divs not having any content inside of it, so you don't get a height.

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

更新：

使第一个图像不是绝对定位，其余的可以绝对定位，所以它们仍然有你想要的堆叠效果，容器将有一个高度，因为你的图像之一是在内容流。 p>

Make the first image not positioned absolutely and the rest can be positioned absolutely, so they still have the stacking effect you want and the container will have a height since 1 of your images is in the content flow.

<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/ 查看完整代码

这篇关于Div里面没有img时没有高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！