围绕可由用户移动的对象具有文本流 [英] Have text flow around an object that can be moved by the user

问题描述

我有一个div浮动在左边，和一些文本包裹它。

I have a div that floats to the left, and some text that wraps around it.

我想要能够移动div上下移动javascript 。在我这样做的时候，我想让文本在它周围流动（根据需要在它的上面和下面）。

I want to be able to move the div up and down with javascript. As I do so, I want the text to flow around it (above it and below it as needed).

我希望这很清楚我要实现什么。如果你在一个单词文档中放置一个对象，文本可能会有什么样的行为。

I hope it is clear what I am trying to achieve. Something like how text might behave if you position an object in a word document.

我已经研究了一下，我的结论是只有当div包含在与文本相同的父元素中时才可能。如果你想移动div上下移动，你必须在文本本身内移动它的位置（例如从后面一句话和向前移动）。

I have already looked into it a bit, and the conclusion I am coming to is that it is only possible if the div is contained within the same parent element as the text. If you want to move the div up and down, you would have to move its position within the text itself (e.g. take a sentence from behind and move it infront).

做一些像给它一个顶部边缘的东西简单地扩展了文本必须流动的块，并且使其位置相对意味着文本围绕其原始位置流动，并且相对定位的div与文本重叠。这一切都是完美的，但是很难实现我想要的。

Doing something like giving it a top margin simply extends the block which text has to flow around, and making it position relative means that the text flows around its original position, and the relatively positioned div overlaps the text. It all makes perfect sense, but makes it very difficult to achieve what I want.

在html / css中有什么可能允许我想要的，或任何插件

Is there anything in html/css that might allow for what I want, or any plugin that does what I have described.

感谢

推荐答案

Marcels链接

我可能会迷惑它，并得到一个接近的近似，因为它的简单，并得到你的一半。

I might be tempted to fudge it and get a close approximation, since its simple and gets you half way there.

http://jsfiddle.net/tromm/e3YHb/ p>

http://jsfiddle.net/tromm/e3YHb/

var img = $('#whale');
var nextP = img.next();
var previousP = img.prev();

$('#move-down').click(function() {
    nextP = img.next();
    img.detach();
    img.insertAfter(nextP)
});

$('#move-up').click(function() {
    previousP = img.prev();
    img.detach();
    img.insertBefore(previousP)
});

基本上通过s移动。在小提琴我也浮动的图像，所以它几乎有点kinda-sorta看起来像它做你所期望的。 ：）

Essentially moving the through the s. in the fiddle i also floated the image so it almost-kinda-sorta looks like its doing what you expect. :)

这篇关于围绕可由用户移动的对象具有文本流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！