当浮动时图像保持高度

Question

我有一张div，其中的照片有float: left属性，文字就在旁边，如下所示：

<div id='1'>
 <img src='img.jpg' width='50%' style='float:left;' />
  This is text next to it<br/><br/>More text
</div>

我不知道图像的尺寸或文本的高度，但文本通常比图像短，导致div比图像短（看起来非常糟糕）。有什么方法可以解决这个问题吗？

Answer 1

只需将overflow: hidden;添加到您的第一个div。

ids中的添加classes和CSS无法从数字开始。

Answer 2

我认为最佳解决方案是在最后添加新的div并用它清除所有内容。像这样：

第一种情况下的

CSS：

#1:after{
    content: "";
    height: 0;
    clear: both;
    display: block; 
}

第二种情况： HTML：

<div id='1'>
 <img src='img.jpg' width='50%' style='float:left;'>
  This is text next to it<br><br>More text
  <div class="cl"></div>
</div>

CSS：

.cl {
clear: both;
}

或者如果您想在最旧版本的IE中运行，可以添加：

.cl { 
font-size: 0; 
line-height: 0; 
text-indent: -4000px; 
clear: both;
}