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

I'm stuck on something where I have a loads of content pages with a message box. In this message box, you could have images, text, headers etc. However each message box will have an Icon in the top right of the box. The image will sit in the top of the box fine if i use position:absolute. However If the message box has a header or a paragraph and fills with the width of the box. The text will sit underneath the image.

我被困在一个有大量内容页面和消息框的地方。在这个消息框中，您可以有图像、文本、标题等。但是每个消息框的右上角都有一个图标。如果我使用的位置是绝对的，图像会放在盒子的顶部。但是，如果消息框有一个标题或段落，并且填充了该框的宽度。文本将放在图像下面。

I basically need a wrapper around the image which has a width so the text will only go sit up until the edge of the image. I'm 99% sure i got it working in firebug by wrapping the absolute positioned image in a div and giving it some styles. But I can't seem to get it working today!

基本上，我需要一个包装在图像上，它有一个宽度，所以文本只能保持到图像的边缘。我99%确信我是通过在一个div中包装绝对定位图像并给它一些样式来让它在firebug中工作的。但是我今天似乎不能让它工作!

There are hundreds of pages, so moving the HTML around is not an option. The image doesn't currently have a wrapper. So i'm having to use Jquery to wrap the image. (That's if it's the answer).

有数百个页面，所以移动HTML不是一个选项。该映像目前没有包装器。所以我必须使用Jquery来包装图像。(这就是答案)。

I know that position absolute takes the element outside of the document flow, but is there something I can do?

我知道position absolute将元素放在文档流之外，但我能做什么吗?

Anyway here is my code so far:

总之，这是我目前的代码:

<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>

The JS wraps a div around the image

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/

JS小提琴——http://jsfiddle.net/jdp7E/

3 个解决方案

#1

Pure CSS solution: Add a pseudo-element at the beginning of the container with

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

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

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

Won't work in older browsers that don't support generated content, so mainly older IE. For those a padding-right for the container could be used as fallback.

不会在不支持生成内容的旧浏览器中工作，所以主要是较老的IE。对于那些容器的划桨权可以用作后备。

#2

Well, perhaps is a very quickie-patchy solution, but how about set a padding-right to ".message" as this?

好吧，也许这是一个非常快速的，不完整的解决方案，但我们不妨把划桨权设为。这消息”?

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

Working fiddle

工作小提琴

#3

jsFiddle Demo

jsFiddle演示

What I would suggest doing is calculating the width of the text message, calculating the width of the icon, setting the width of the text message to the percent remaining if the icon's width were removed from the text message width.

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

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

#1