javascript - Wrapping text around an absolute positioned element - Stack Overflow

admin管理员组

文章数量:1289582

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!

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

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

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

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

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!

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

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

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 23, 2017 at 6:12 Cœur 38.7k2626 gold badges203203 silver badges277277 bronze badges asked Jun 20, 2013 at 10:46 JDaviesJDavies 2,77077 gold badges3535 silver badges5555 bronze badges 4

• Any place where we can see this? or can you set it up on jsfiddle? – painotpi Commented Jun 20, 2013 at 10:49
• Can't you just but the image into the HTML code for your message box first, and then just floatit to the right? – C3roe Commented Jun 20, 2013 at 10:50
• No, like i said there no hundreds of pages where it's already been added. Updated ticket with JSfiddle – JDavies Commented Jun 20, 2013 at 10:54
• What you want is impossible. An absolutely positioned element is no longer part of the flow layout in any way, and as such other content cannot interact with it, or flow around it. You need to insert it as inline floating content to achieve the intended effect. – Niels Keurentjes Commented Jun 20, 2013 at 10:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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

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

http://jsfiddle/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.

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

jsFiddle Demo

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

本文标签： javascriptWrapping text around an absolute positioned elementStack Overflow