文本內的浮動圖像

我需要在文本中浮動圖像（實際上是最終結果中的一個Flash橫幅），但每個圖像都是從不同的CMS中獲取的。所以我的DOM結果是：文本內的浮動圖像

<img src="" alt=""/> 
<p>All text here</p>

有沒有辦法使用客戶端方法來使圖像在文本中浮動？（因此，這將是一個小的底部，但仍然有文字環繞它）彷彿標記是這樣的：

<p>Star of text</p> 
<img src="" alt=""/> 
<p>End of text</p>

我使用的小提琴，試圖得到一些例子去：http://jsfiddle.net/F3ZyF/5/

您是否嘗試過在第二個代碼段中實際製作標記？ – TylerH

在這種情況下，您需要一些JavaScript來將'img'（或banner）元素放置在DOM的更遠處。 –

解決！謝謝Marc。我在jquery中使用了insertAfter（）。 –

嘗試 <p>Start of Text<img src="" alt="" style="align:bottom;">End of Text</p> 注意我添加了style="align:bottom;並將img標記放入p標記中。

2014-06-09 15:00:17 Jonco98

OP面臨的問題是圖像/橫幅首先出現在標記中（他的控制之外），並且他想把它放在其他地方。你的CSS當然會工作，但你仍然需要使用JavaScript/jQuery來操縱DOM，以將圖像/橫幅放在新的位置。 –

這裏是我的版本基於jQuery的解決方案：

banner_wrap = $(".article-box-banner-wrap").detach(); 
$(".article-text p").first().after(banner_wrap);

使用.detach()功能從DOM中刪除標題元素，然後用.after()（或類似）第一p後重新插入旗幟。

2014-06-09 15:02:39

回答