不使用绝对定位定位元素

Question

我有以下要求:

• 一个用文本填充的<p>元素
• a <img>元素
• 定位图像的坐标(x/y)

现在我想根据服务器端计算的x和y像素值来定位<img>元素。我不想使用position:absolute，因为我也希望<p>元素中的文本能够围绕图像进行自我包装。

JsFiddle这里。

Answer 1

可能你的问题的一个解决方案可能是使用shape-outside与polyfill的旧版本的IE/FF/Chrome。

我在你的例子中添加了一些代码: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 2

在玩具案例中几乎可以工作的是:

1. 获取<p>元素的全文
2. 根据x的形式0到文本的长度，在<span>元素的"before"， "after"中分割内容。
3. 进行二分类搜索，找到x的分裂点，使after.offsetTop为期望值。
4. 通过添加前跨度，图像和后跨度创建最终内容。

在代码:

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 3

经过几个小时的尝试和失败后，我决定shapes-polyfill不适合我的需要。这就是为什么我建立了我自己的解决方案(受shapes-polyfill的启发)，你可以在这里看看。

因为我们正在使用jQuery，我建立了一个解决方案，使用它，但它可以很容易地变成纯javascript(所有我使用jQuery是设置一些css和附加html)。此外，它又快又脏，可以重构，但我懒得这样做。div;)