使用CSS在div中保留浮动图像

Question

我遇到了这个问题,和以前一样,但从未试图找到正确的解决方案

码:

 <div id="ListOfTextAndPhotos">
      <div style="border-bottom: solid 1px silver;">
          <img src="photo.jpg" style="float: left">
          Some text about the photo
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo2.jpg" style="float: left">
          Some text about the photo2
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo3.jpg" style="float: left">
          Some text about the photo3
      </div>
  </div>

问题: 如何将照片保留在DIV内？与照片下方的分隔线

Answer 1

更传统的方式(清除除外)是将包含div的overflow属性设置为hidden.

<div style="border-bottom: solid 1px silver; overflow: hidden;">
      <img src="photo3.jpg" style="float: left">
      <div>Some text about the photo3</div>
</div>

有时,IE6不尊重设置,你必须诉诸cLFlaVA黑客.