CSS | 将div放在之后 <p> 标签

Question

I am trying to add this tooltip right after ap tag's text finishes.

In this example the tooltip show an image when i hover it:

<p>This is some text in a paragraph.</p> 
<div class="help-tip">
    <p><img src="balloon.jpg" width="300" /></p>
</div>

How could i align the .help-tip right after the "This is some text in a paragraph" paragraph?

Regards

Answer 1

First of all your elements dont align because the img is wrapped with a p tag, which automatically changes the line.

<p>This is some text in a paragraph.</p> 
<div class="help-tip">
    <img src="balloon.jpg" width="300" />
</div>

To solve this you have to keep in mind that your container has to be able to contain both elements. So if your img is 300 px wide and your p element is 150px you need a container larger than 450px.A solution would be to wrap the two elements with a wrapper div and and add inline display in css.

HTML

<div class="wrapper">
    <span class="foo">This is some text in a paragraph.</span> 
    <div class="help-tip">
         <img src="balloon.jpg" width="300" />
    </div>
</div>

CSS

.foo{
 width:150px;
 positition:relative;
}
.wrapper{
     width:550px;
     positition:relative;
}
.help-tip{
    display:inline;   
}

UPDATE

This was not working because the paragraph text was wrappped in p element and it was going below by default. If you have to use the p element you can use position:absolute for the image to align it, or use span rather than p and use this jsFiddle .

Answer 2

Edit even better code:

CSS:

.help-tip {
    /* remove following css: */
    position: absolute;
    top: 18px;
    right: 18px;
    /* add following css: */
    display: inline-block;
    position: relative;
}

HTML:

<p>This is some text in a paragraph.</p>
<div class="help-tip">
    <p><img src="balloon.jpg" width="300" /></p>
</div>

---

Other previous method:

.help-tip {
    /* remove following css: */
    position: absolute;
    top: 18px;
    right: 18px;
    /* add following css: */
    float: left;
    margin: -2px 10px;
}
p {
    /* add following css: */
    float: left;
}