将图像插入文本并使用 CSS 保持文本换行答案

【问题标题】：Insert image into text and keep the text wrapping with CSS将图像插入文本并使用 CSS 保持文本换行
【发布时间】：2011-03-27 16:27:26
【问题描述】：

我刚刚遇到了一个我目前（几乎等于 0）的 CSS 知识无法处理的问题。事情是这样的：

我在 div 元素中有一些文本；这个 div 元素（我们称之为容器）具有固定宽度和动态高度（无约束）。我想在容器内放一些文字；在正文的第二个单词之后，我想放一张图片，让整个事情看起来或多或少像这样：

+---------------------+
| I was [x] on my way |
| to the city in the  |
| sun                 |
+---------------------+

其中 [x] 是图像。对文本的第二部分进行换行很重要，这样所有内容都像上面的示例一样。

容器中的文字可能会有所不同；不过我总是知道文字的哪一部分在图片之前，哪一部分在图片之后。

如何使用 CSS 做到这一点？

【问题讨论】：

【解决方案1】：

如果您将<img> 标记放在文本中间，则默认情况下应该是这样，除非您覆盖图像的display 属性。您可能还想尝试使用图像的 vertical-align 属性，使其与周围的文本很好地对齐。

【讨论】：

感谢您的回答！它适用于来自精灵的图像吗？
不确定您所说的“精灵”是什么意思。目标浏览器支持的任何类型的图像都可以使用 - jpeg 和 gif 得到广泛支持，大多数浏览器也接受 png。其他图像类型取决于平台和浏览器。
我在想一个像这样的精灵：css-tricks.com/css-sprites。我没有使用显式图像，而是具有适当背景设置的 div。
我明白了。在这种情况下，您必须在图像 div 上显式设置 display: inline-block 以使其按预期运行。这适用于所有符合标准的浏览器，但我认为 IE6 甚至 7 都无法理解 inline-block。 display: inline 可能不起作用，因为它无法让您对元素的高度进行足够的控制。
非常感谢！你是对的， display: inline-block 有帮助。不幸的是，它需要一个 hack 才能为 IE7- (brunildo.org/test/inline-block.html) 工作，但您提供的解决方案正是我所需要的。