像在Word中一樣在div上環繞文本

Question

我希望實現以下目標：

我想要屏幕中間的一個塊元素（div / img），它應該被這樣的文本包圍：

我知道此功能存在於M $ Word中。 是否也可以使用Web技術（HTML，CSS，JS）來做到這一點？

對於我的用例而言，細節並不那么重要，因為我想用詞雲圍繞圖像，因此我不介意左右文本是否實際上是列而不是行。

Answer 1

這是一種蠻力解決方案，但可能會給您一個想法。

 html, body { height: 100%; text-align: justify; } .text:after { content: "Lorem ipsum drbi posuert, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesqu adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper non"; } .left, .right { width: 33%; display: inline-block; height: 200px; overflow: hidden; } img { width: 31%; max-height: 200px; } 

 <div class="text"></div> <div class="text left"></div> <img src="https://i.stack.imgur.com/bVAmG.gif"> <div class="text right"></div> <div class="text"></div>