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

在小提琴第一部分顯示我的問題，第二部分顯示了文本的格式應該如何看圖像旁邊。

的記錄

我可以得到這個由一個div封裝P，H2，H3標籤，使該行內上班，但是我希望文字直接流入下的全寬圖片。

Answer 1

你在找這樣的事嗎？

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

我刪除了內聯CSS格式化和浮動圖像左側。

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