The solution of self-adaptive absolute positioning

Perhaps you will often have such a demand: a paragraph of text has a map, the map and text paragraphs remain on the same horizontal line, but the height and width of the form is not fixed, need to adapt.

Like the following picture, the image should be kept at the same horizontal line as the red text:


Effect of final code implementation: Auto Position
Our usual practice is this:

<!--HTML structure-->
<div id= "Test" >
<p>

Text text ...
</p>
<p>

Text text ...
</p>
...
</div>
/* CSS Code * *
/* Set relative positioning for each P * *
#test p{position:relative;padding-right:100px;}

/* Set the absolute positioning of each IMG relative to P * *
#test img{
Position:absolute;
top:0;
right:0;
}
Yes. That's it. In fact, this has been a very good practice. Without float, the code is simple. That's what I've always recommended. However, in fact, the POSITION attribute inside there is a not often found by the trick. In fact, we can write this:


/* Set relative positioning to the container * *
#test {position:relative;padding-right:100px;}

/* Set the absolute positioning of each IMG relative to the container * *
#test img{
Position:absolute;
/* TOP:0; Do not set the top alignment, so you can adaptively position the
right:0;
}
This reduces the renderer of the selector, only one parent container, and the byte is reduced, and no top:0 is required; While performance improvement and flow savings are not obvious, why not use it if there is a better way to do it?