如何在内容可编辑的div中动态环绕图像周围的文本？

Question

我想通过单击按钮在div添加图像，然后根据图像的位置调整contenteditable div并将文本环绕在图像上。 我希望在这些图像中创建一些东西：

• 文字左侧的图片
• 文字中间的图片
• 文字右侧的图片

这可以通过在CSS中使用float属性来解决，但它也不是动态的，就像我将图像移动到左右浮动的任何位置一样，无论它是在CSS中定义的，还是在JSFiddle和代码中指定的。

 function upload() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; var image1 = newImage.outerHTML; var n; n = document.getElementById("test"); n.innerHTML += image1; }; fileReader.readAsDataURL(fileToLoad); } } 

 <input type="file" onchange="upload()" id="inputFileToLoad"> <div contenteditable="true" id="test" style="height=500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> 

如果我上载图像，则只在最后一行显示它，而不是在图像周围包裹文字。

有谁知道如何解决这个问题的线索？

Answer 1

您可以伪造float: center将图像float: center ，请参见示例

https://css-tricks.com/float-center/

您需要使用标签（可能是div包装图像，而不是设置before和after