不使用绝对定位定位元素

Question

我有以下要求：

一个 <p> 元素填充了文本
一个<img>个元素
放置图像的坐标 (x/y)

现在我想根据服务器端计算的 x 和 y 像素值定位 <img> 元素。我不想使用 position:absolute，因为我还希望 <p> 元素内的文本环绕图像。

JsFiddle here.

Css 就好了，但使用 javascript 也是可以的。

Answer 1

在玩具箱中几乎起作用的东西是：

获取<p>元素的全文
根据 x 表格 0 到文本长度将内容拆分为 "before"、"after" <span> 个元素。
进行二分搜索以找到 x 分裂点，以便 after.offsetTop 是期望值。
通过添加之前的跨度、图像和之后的跨度来创建最终内容。

在代码中：

function add(img, textdiv, y) {
    var t = textdiv.textContent;
    var a = 0, b = t.length;
    var bef = document.createElement("span");
    var aft = document.createElement("span");
    while (a < b-1) {
        var x = (a + b) >> 1;
        bef.textContent = t.substr(0, x);
        aft.textContent = t.substr(x);
        textdiv.innerHTML = "";
        textdiv.appendChild(bef);
        textdiv.appendChild(aft);
        if (aft.offsetTop > y) {
            b = x;
        } else {
            a = x;
        }
    }
    textdiv.innerHTML = "";
    textdiv.appendChild(bef);
    textdiv.appendChild(img);
    textdiv.appendChild(aft);
}

此解决方案中缺少但不难添加的东西是将检测到的拆分点移动到下一个单词边界（目前它可以在单词中间拆分文本）。

使用 google chrome 和 firefox 我没有看到任何闪烁（但我只调用了一次，而不是在计时器下）。

在实际情况中，不仅是文本，而且是任意的 HTML 事情要复杂得多。

Answer 2

对于旧版本的 IE/FF/Chrome。

可能解决您的问题的一种方法是使用 shape-outside 和 polyfill

我已将一些代码添加到您的示例中： http://jsfiddle.net/dnmbpa7f/4/

img{
    shape-outside: polygon(10px 200px, 10px 500px, 550px 500px, 550px 200px);
    shape-margin: 1em;
    margin:25px;
    float:left;
    margin-top:200px;
}

div#container{
    clear:both;
}

<div id="container">
    
<img src="https://www.estella-kochlust.de/media/image/thumbnail/burger_520x520.png"/>  
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,   consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <span>popop</span>sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    
    </p>
</div>

有关 polyfill 的更多信息，请参阅：http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/

此致，离子

Answer 3

经过数小时的尝试和失败后，我认为 shapes-polyfill 不符合我的需求。这就是为什么我构建自己的解决方案（受 shapes-polyfill 启发），您可以查看 here.

因为我们正在使用 jQuery 我构建了一个使用它的解决方案，但它可以很容易地变成普通的 javascript（我使用 jQuery 只是为了设置一些 css 并追加 html)。它又快又脏，可以重构，但我懒得这样做。 ;)

不使用绝对定位定位元素

Position element without using absolute positioning

html

css

css-position