使用CSS3使文本环绕图片。

Question

使用CSS3使文本环绕图片。

htmlcss

5

令人惊讶的是，我找不到简单问题的答案 - 如何将文本围绕图片包裹？我有动态生成（用户输入）的文本和图像，并且我需要将其放入 div 中，就像这样：

或者，在没有足够的文本的情况下，它应该是这样的：

换句话说，图片应该显示在设置的位置，并被文本包裹。我以为这很容易，但突然发现不知道如何做，请帮忙，我想应该有一个简单的方法来实现这一点。

- BbIKTOP

1

不可能的，只是想象一下浏览器如何处理这个... 对你来说很直观，但并不像你想的那么简单。你需要JS和很多技巧。 - Temani Afif

2

有一个类似的东西叫做shape-outside，但仍然远远不够... W3 的目的是提供规范而非实现 ;) 实现和开发取决于浏览器... 因此，您可以考虑将其作为 JS 插件实现，其中您可以创建您的 float;here ;) - Temani Afif

1

为什么，如果你和我不知道答案，这并不意味着没有答案）让我们等待并检查)) - BbIKTOP

1

理论上，这是通过CSS Exclusions（https://rachelandrew.co.uk/archives/2016/03/16/css-exclusions-and-grid-layout/）实现的，但实际上，它们仅在MS Edge中得到支持。 - Ilya Streltsyn

嗯，所以，实际上不可能。难以置信。 - BbIKTOP

显示剩余9条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erlisar Vasquez · Answer 1

我相信这是可能的，但它非常先进，需要大量的js和css来操纵流程。假设蓝色矩形是您可以放置文本的html标记，比如一个div。例如，从rA的文本将继续到rB，然后到rC。这个将一直向下延伸，直到其总高度等于中间元素（比如图片）的高度。基本上，思路是当文本溢出时，使其从一个div跳到另一个div。在这个网站上找到了这个方法。