Javascript 围绕绝对定位元素包装文本

我被困在一个有大量内容页面和消息框的地方。在此消息框中，您可以有图像、文本、标题等。但是，每个消息框的右上角都有一个图标。如果我使用position:absolute，图像将位于框的顶部。但是，如果消息框有标题或段落，并用框的宽度填充。文本将位于图像下方

我基本上需要一个包装周围的图像有一个宽度，使文本将只坐起来，直到图像的边缘。我99%确信我在firebug中通过将绝对定位的图像包装在一个div中并给它一些样式来实现它。但我今天好像没法让它工作

有数百个页面，所以移动HTML不是一个选项。图像当前没有包装器。所以我必须使用Jquery来包装图像。（如果答案是这样的话）

我知道position-absolute将元素置于文档流之外，但是我能做些什么吗

无论如何，这是我目前的代码：

<div class="message">
<h3>Some text, a header perhaps? But this is the next that will sit under the image, sometimes it's a p tag.</h3>
<img class="messageIcon" src="/link-to-icon/which-are-the-same-size" border="0" width="64" >
<p>Some more random text that would appear in the messagebox this could go on for a few lines.</p>
</div>


<script type="text/javascript">

$(document).ready(function(){
    $('img.messageIcon').wrap('<div class="messageIconWrap" />');

    alert("this is a test");

});



</script>

---

JS Fiddle-

好吧，也许是一个非常快速的补丁解决方案，但是像这样将

填充设置为“.message”怎么样


我建议做的是计算文本消息的宽度，计算图标的宽度，如果从文本消息宽度中删除图标的宽度，则将文本消息的宽度设置为剩余的百分比

var mw = $('.message:first-child').width();
var iw = $('.messageIcon').width() + 20;//20 is for padding
var percent = parseInt((mw - iw) / mw * 100);
$('.message :first-child').width(percent+"%");

纯CSS解决方案：在容器的开头添加一个伪元素

div.message:before { content:" "; float:right; width:75px; height:75px; }


在不支持生成内容的较旧浏览器中不起作用，因此主要是较旧的IE。对于那些浏览器，可以使用容器右侧的填充作为后备。
我们可以在哪里看到这一点？或者你能在jsfiddle.net上设置它吗？你能不能先把图像放到消息框的HTML代码中，然后把它放到右边？不，就像我说的，没有几百页已经添加了它。用jsfiddle更新票证您想要的是不可能的。绝对定位的元素在任何情况下都不再是流布局的一部分，因此其他内容无法与其交互或围绕其流动。您需要将其作为内联浮动内容插入以达到预期效果。我不能这样做，因为文本需要环绕，并且页面左侧的间距与页面右侧的间距相同。这是一个很好且快速的解决方案。我更喜欢在这些页面中从图标中删除绝对位置cases@JoshDavies我的错：（对不起！在这种情况下更难的是，让我试试，因为我很确定几个月前我也有你同样的需求……谢谢你的帮助：）谢谢，这看起来是可行的。我需要和客户端一起检查IE是否正常。你能更详细地解释一下这实际上是如何工作的吗？它只是在容器的开头生成一个伪子元素，由于它被向右浮动，下面元素的文本内容围绕它流动。Ba正如我之前向您建议的，只需将图像本身放在第一位并将其浮动，但由于您说这在您的情况下不实用，因此这是一种解决方法，它可以在不操纵或添加任何标记的情况下实现相同的效果，并将绝对定位图像下的空间保留为“保留”。非常感谢！非常感谢，我会试一试。似乎是我在这种情况下需要的。内容是什么：“；精确地执行？
content
说明生成的伪元素的实际内容应该是什么–可以是任何字符或图像。由于我们不需要或不希望任何可见的内容，因此我只使用了一个空格字符。（content属性必须有“something”作为值，否则将根本不会呈现任何内容）。
var mw = $('.message:first-child').width();
var iw = $('.messageIcon').width() + 20;//20 is for padding
var percent = parseInt((mw - iw) / mw * 100);
$('.message :first-child').width(percent+"%");

div.message:before { content:" "; float:right; width:75px; height:75px; }