使用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 内？ 并在图片下方添加分隔线。

- Eduardo Molteni

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 hack。

- davethegr8

---

@davethegr8：你是不是不小心把clear:both留在那里了，还是它还是需要的？ - cLFlaVA

@cLF - 哎呀...我从"关于"页面复制过来，忘记删除了。已经编辑好了。 - davethegr8

好的，我已经更改了被采纳的答案。 - Eduardo Molteni

Answer 2

浮动一个元素会使它脱离文档流，因此在屏幕渲染时不会在一般流中占用空间。还有其他处理方式，但这里有一个hack方法：

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

- cLFlaVA

---

问题是，如果您想在文档内浮动更多的项目，则由于清除设置可能会导致问题。 - davethegr8

没问题。如果你不想让文本独占一行，你也可以在文本后面放一个空的 div 元素。我通常会这样做：<div class="clr"></div>，并使用 CSS 样式 .clr { clear: both; }。 - cLFlaVA

叹气 是的，这个方法可行，但真正的答案是使用overflow属性，就像davethegr8的回答所说的那样。 - Darko

@cLFlaVA - 假设您在一个元素中有这段代码以及其他一些文本。并且您还有一个使用浮动定位的侧边栏。如果您使用clear，那么您刚刚破坏了侧边栏，因为它会影响这些照片的流动。 - davethegr8

@davethegr8 - 我并不是在反对你，我发表了我的初始评论的时间和你差不多。我从来没有声称这是万能解决方案，事实上，我甚至提前警告说这只是一个权宜之计。也许我根本不应该发表评论。 - cLFlaVA

Answer 3

一种快速而简单的方法是将包含div也设置为浮动。

- tj111

Answer 4

添加 <div style="clear:both;"></div> 是一个完全的hack，会影响你以后对页面进行修改。正确的解决方法是使用纯CSS，并添加 overflow: hidden; 或 zoom: 1;。

但是，仅仅添加 overflow: hidden 是不够的，还需要确保包含块有宽度属性。

我还想指出，在上面的问题和批准的答案中，如果文本立即被告知清除浮动，那么最初浮动图像的目的是什么？ http://www.quirksmode.org/css/clearing.html

- Steve Perks

Answer 5

我在这里遇到了类似的问题，我的图片溢出了我的div：

< div id="offer"> < div class="inner"> < img src="offer.png" alt="">

我必须让我的图像float:right;以便文本出现在其左侧并填充空间。我无法弄清楚为什么它会溢出，但是tj111的“快速而肮脏”的方法使#offer{float: left/right/upmycornhole;}完全解决了问题，并且没有重新定位div，因为包含div在保持页面上的位置的包装器内。

谢谢tj，你是救命恩人！

- neopod