如何在这样的三个方面围绕对象包装文本？

Question

基本上寻找一种在不使用polyfill的情况下拉出CSS Shapes的方法。

我有<div/>个内容。就在这个div的外面，我有一个小的<aside/>组件，我需要浮动到左边，内容环绕它，在上面，右边和下面。 （见下图。）这不是一个简单的浮点数，因为浮动元素不会知道包装内容的开头或结尾。

您将在下图中看到浮动对象似乎从第一段的内部开始。但是对象实际上必须存在于DOM树中的content div之外。

我知道有一个CSS Shapes spec in the works，但不相信它在任何地方都受到支持。

是否可以在没有CSS Shapes polyfill的情况下拉出这样的东西？

Answer 1

假设您希望对象位于包含文本的div之外，如果您可以设法将Ajax结果拆分为2个div或段落，则代码将如下所示：

<div>Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text </div> 
<div id="yourFloatedDiv" style="float:left"></div>
<div> Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>