向左浮动图像会更改容器div的高度 [英] Floating image to the left changes container div's height

问题描述

尝试运行以下操作时：

 < div id =container> 
 //这是一个200x200的图片
< img src =http://dummyimage.com/200x200/CCC/000/> 
< / div> 
  

使用CSS：

  #container {
 background：＃000; 
} 
  

我得到一个带有黑色背景容器的DIV。 p>

但是，当我添加以下到CSS：

  #container img {
 float：left; 
} 
  

看起来容器没有检测到其中的图像，设置为最小（可以在此处查看： http://jsfiddle.net/wc4GJ/ ）。

如何将图像浮动到左边弄乱容器DIV的高度？

谢谢，

Joel

解决方案

添加 overflow：auto; code> #container

（说明如下）

When I try to run the following:

​<div id="container">
     //This is a 200x200 image        
     <img src="http://dummyimage.com/200x200/CCC/000" />
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

with CSS:

​#container {
    background:#000;
}

​I get a DIV with a black background container like I want.

However, when I add the following to the CSS:

#container img {
   float:left;
}

It seems like the container does not detect the image inside it and its height is set to minimum (can be seen here: http://jsfiddle.net/wc4GJ/ ).

How come floating the image to the left mess up the container DIV's height?

Thanks,

Joel

解决方案

Add overflow:auto; to #container

(Explanations below)

这篇关于向左浮动图像会更改容器div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！