内联IMG拆分P标签

Question

I have an image which I want to be inline with text. I can't work out how to do this whilst maintaining the formatting and not having the paragraph split as seen in the fiddle...

<style>
    .test1 img, .test1 p, .test1 h1, .test1 h2, .test1 h3{
        display:inline;
        vertical-align:top;
    }
    img{
        width:150px;
        height:150px;
    }
</style>
<div class="test1" align="left">
    <img src="">
    <h2>eLearning</h2>
    <h3>No one said work had to be boring.</h3>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>

https://jsfiddle.net/nxyLv9vm/2/

The first section in the fiddle displays my problem and the second section shows how the formatting of the text should look next to the image as well.

I get this to work by encapsulating the p,h2,h3 tags in a div and making this inline, however I want the text to flow full width directly under the image.

Answer 1

Are you looking for something like this?

https://jsfiddle.net/kumiau/u98x2ttg/

I removed the inline css formating and floated the image to the left.

img{
  width:150px;
  height:150px;
  float: left;
}