html - CSS在浮动时保持高度

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，classesinCSS不能从数字开始。

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