将文本环绕在绝对定位的元素周围

Question

我遇到了一个问题，在许多内容页面中有一个消息框。在此消息框中，您可以使用图像、文本、标题等。然而，每个消息框都会在右上角有一个图标。如果我使用position:absolute，则图像将很好地放置在框的顶部。但是，如果消息框具有标题或段落并填充了框的宽度，则文本将位于图像下方。

基本上，我需要一个围绕图像的包装器，其宽度使得文本只能显示到图像的边缘。我99％确定通过将absolute定位图像包装在div中并给其一些样式在firebug中实现了它。但今天似乎无法使其工作！

由于有数百个页面，因此无法移动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会在图片周围包裹一个div标签。

CSS：

.messageIconWrap{
    display: inline-block;
    float:right;
    height:60px;
    width:60px;
}

div.message {
    position: relative;
}
.message {
    background: none repeat scroll 0 0 #393939;
    clear: both;
}

.messageIcon {
    position: absolute;
    right: 20px;
    top: 20px;
    float: right;
}

JS Fiddle - http://jsfiddle.net/jdp7E/

- JDavies

---

有什么地方可以看到这个吗？或者你能在jsfiddle.net上设置吗？ - painotpi

你不能先将图片放入消息框的HTML代码中，然后将其float到右侧吗？ - CBroe

不，就像我说的那样，没有数百页已经添加了它。使用JSfiddle更新了票据。 - JDavies

你想要的是不可能的。绝对定位的元素已经完全脱离了流式布局，因此其他内容无法与其交互或围绕其流动。您需要将其插入为内联浮动内容以实现预期效果。 - Niels Keurentjes

Answer 1

纯CSS解决方案：在容器的开头添加一个伪元素，使用以下CSS属性：

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

http://jsfiddle.net/jdp7E/1/

这段代码在不支持生成内容的旧浏览器中无法正常工作，主要是指较老版本的IE。对于这些浏览器，可以使用容器的padding-right作为备选方案。

- CBroe

---

谢谢，这看起来可能可行。我需要确认客户在IE中是否正常。您能否详细解释一下这实际上是如何工作的？ - JDavies

它只是在容器的开头生成一个伪子元素，由于它向右浮动，所以后续元素的文本内容会围绕它流动。基本上，就像我之前建议你那样，只需要将图像本身放在第一位并将其浮动-但由于你说在你的情况下这不可行，这是一个解决方法，可以实现相同的效果，而不需要操纵或添加任何标记，并保留了绝对定位的图像下方的空间 "预留"。 - CBroe

非常感谢！非常感激，我会尝试一下。在这种情况下似乎是我需要的。内容：“ ”; 究竟是做什么的？ - JDavies

“content” 表示生成的伪元素的实际内容 - 可以是任何字符或图像。由于我们不需要或希望在此处看到任何可见内容，因此我只使用了一个空格字符。（必须为 content 属性设置“某些”值，否则根本不会呈现任何内容）。 - CBroe

Answer 2

也许这只是一个快速的解决方案，但是怎么样在“.message”中设置padding-right呢？

div.message {
    position: relative;
    padding-right:80px; /* - You can set a padding higher or equal than the image - */
}

工作的fiddle

- Arkana

---

我不能这样做，因为文本需要环绕并且在页面左侧和右侧具有相同的间距。 - JDavies

这是一个好的且快速的解决方案，但在这些情况下，我更喜欢从图标中删除绝对定位。 - Kamran Asgari

@JoshDavies 对不起我的错 :( 请原谅！在这种情况下更加困难，让我试试，因为我很确定几个月前我有和你一样的需求... - Arkana

Answer 3

jsFiddle演示

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

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+"%");

- Travis J