内联 IMG 拆分 P 标签

Question

我有一个图像，我想与文本内联。我无法弄清楚如何在保持格式并且不像小提琴中看到的那样拆分段落的同时做到这一点......

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

小提琴的第一部分显示了我的问题，第二部分显示了文本格式在图像旁边的外观。

为记录

我可以通过将 p，h2，h3 标签封装在一个div 中并将其内联来使其工作，但是我希望文本直接在图像下方全宽流动。

Answer 1

你在寻找这样的东西吗？

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

我删除了内联 css 格式并将图像浮动到左侧。

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