CSS 将文本环绕在图像周围答案

【问题标题】：CSS Wrapping text around imagesCSS 将文本环绕在图像周围
【发布时间】：2013-05-22 23:02:53
【问题描述】：

对于我一直在构建的这个网站，我需要以某种方式显示内容，我有一个缩略图、两个屏幕截图和一个大约 500 字的文本块。我需要将文本环绕在我的缩略图和屏幕截图中。目前我正在使用 PHP substring 分解单词的内容并将它们显示在我需要的地方，但这不起作用，因为每个浏览器上的文本显示都不同我需要一个流畅的解决方案，你可以看到一个页面示例我说的是HERE，我需要图像保持这种状态，但文字要环绕图像，而不是在应该有更多单词的地方有奇怪的间距。提前感谢您的帮助！

【问题讨论】：

"应该有更多单词的奇怪间距。"那是空间，因为整个下一个词不适合
@Dagon 看起来像这样，因为我使用了多个 p 标签，但是有没有办法用 1 p 标签做同样的事情，所以包装很好，谢谢！
将<p>标签放在段落边界，并将图像或多或少放在它们应该去的地方。您目前有<p> 标签只是随意放置在随机位置。只是不要那样做，事情应该可以正常工作。
@Pointy，非常简单，非常感谢，我现在只有 1 个 <p> 标签，然后我用 substr 将内容拆分，并将图像放在应该去的地方，再次感谢！跨度>

标签： php jquery css image fluid

【解决方案1】：

只需浮动图像即可。这是一个例子：http://jsfiddle.net/agrublev/a5RJN/

<img src="xx.jpg" style="float:left;">

【讨论】：

谢谢，但它们已经被浮动了，我想我正在寻找一种方法来做同样的事情，但只有 1 个 p 标签谢谢！

【解决方案2】：

您可以尝试将 align="left" 赋予将包含在 p 中的图像如果你想要一个边距，它可以看起来像这样

<img src="#" align="left" style="margin-right:10px;">

【讨论】：

【解决方案3】：

如果您知道要在其中放置带有孔的单词（图片）的空间的大小（宽度、高度），则可以生成 SVG。优点：它适用于所有浏览器，您可以随意放词（甚至可以旋转它们）。

当然，您可以将生成的 SVG 用作小部件。

【讨论】：

【解决方案4】：

我找到了一个可能对您有用的代码示例。当然，使用 position 属性无济于事，因为单词不会环绕它。但也许将图像包装在 div 中并像这样使用边距会有所帮助。

http://codepen.io/atomworks/pen/algcz

【讨论】：