HTML / CSS如何格式化文本并在其旁边浮动图像

Question

Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.

I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.

Text Description.....
Description..........
Description..........                             Image Goes About Here
Description..........
Description..........

Does anyone know how to do this off the top of their head? Thank you.

Answer 1

for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>

edited

Answer 2

The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.

img, p {
   display: inline-block;

}


<img src="image.png" />
 <p>
 text left
 </p>

Answer 3

use padding and float...

Ie

<div id="container">
  <div id="text" style="padding-right: <image-width+few px>">
     text text text
     text text text
  </div>
  <img src="<imagesrc" style= "float:right" />
</div>

padding so the text doesn't overlap with the image. this should give you the desired effect. After the image, add a div with clear:both to return to use all the dims of the div.