Html 在不使用绝对定位的情况下定位元素

我有以下要求：

• 填充有文本的
  元素

• 元素
• 用于定位图像的坐标（x/y）

现在，我想根据服务器端计算的x和y像素值来定位

元素。我不想使用

position:absolute

，因为我还希望

元素中的文本环绕图像

---

Css很好，但是使用javascript也是可能的。

在玩具箱中几乎可以工作的是：

获取

元素的全文

根据

x

表单0到文本的长度，将内容拆分为“before”、“after”

元素

进行二分法搜索以找到

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);
}

函数添加（img，textdiv，y）{
var t=textdiv.textContent；
变量a=0，b=t.长度；
var bef=document.createElement（“span”）；
var aft=document.createElement（“span”）；
而（a>1；
bef.textContent=t.substr（0，x）；
aft.textContent=t.substr（x）；
textdiv.innerHTML=“”；
textdiv.appendChild（bef）；
textdiv.appendChild（船尾）；
如果（后偏移>y）{
b=x；
}否则{
a=x；
}
}
textdiv.innerHTML=“”；
textdiv.appendChild（bef）；
textdiv.appendChild（img）；
textdiv.appendChild（船尾）；
}

这个解决方案中缺少但不难添加的东西是将检测到的分裂点移动到下一个单词边界（当前它可以在单词中间分割文本）。 谷歌chrome和firefox我都看不到任何闪烁（但我只打过一次电话，没有用定时器）

---

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

解决问题的一个方法可能是在IE/FF/Chrome的旧版本中使用带多边形填充的外部形状

我在您的示例中添加了一些代码：

img{
外部形状：多边形（10px 200px，10px 500px，550px 500px，550px 200px）；
形状边缘：1米；
利润率：25px；
浮动：左；
利润上限：200px；
}
分区#集装箱{
明确：两者皆有；
}

他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是正确的。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。

经过数小时的尝试和失败，我决定

形状polyfill

不适合我的需要。这就是为什么我构建了自己的解决方案（灵感来源于

shapes polyfill

），您可以看看

---

因为我们正在使用jQuery，所以我构建了一个使用它的解决方案，但它可以很容易地转换为纯javascript（我使用jQuery的目的就是设置一些css和附加html）。而且它速度快、脏，可以重构，但我懒得这么做

您不能这样做，因为流只环绕浮动元素，但浮动元素，甚至是相对元素，永远不允许文本流环绕，只在另一侧。而且，这一点都不是万能的。如果我有一个1000像素的屏幕，而你的图像是600宽呢？现在我必须向右滚动…在你的小提琴中，它在标记之外。正如@somethinghere所说的，你需要让它们漂浮起来。。。但是如果你想把文本包装起来，你需要把它放在@something里面，在这里服务器可以正确地计算值，