Question

我有以下要求：

<p>元素填充文字
一个<img>元素
坐标（x / y）位置图像的位置

现在我想根据我的服务器端计算的x和y像素值来定位<img>元素。我不想使用position:absolute，因为我还希望<p>元素中的文本将自己包裹在图像周围。

JsFiddle here.

Css只会很好，但也可以使用javascript。

Answer 1

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

获取<p>元素
取决于x表单0到文本的长度，在＆＃34;之前＆＃34;＆＃34;＆＃34;＆＃34;之后分割内容。 <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);
}

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

使用谷歌浏览器和Firefox，我都没有看到任何闪烁（但我只做了一次这个电话，而不是在计时器下）。

在一个真实的情况下，它不仅仅是文本，而是任意的HTML事情要复杂得多。

Answer 2

对于您的问题，一个解决方案可能是使用旧版IE / FF / Chrome的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>

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

祝你好运，离子

Answer 3

经过几个小时的尝试和失败，我认为shapes-polyfill不符合我的需要。这就是为什么我建立自己的解决方案（灵感来自shapes-polyfill），您可以查看here。

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

位置元素不使用绝对定位

3 个答案: