1. <style>            .img-left {   
2.             border: 3px solid #005588;                width:300px;   
3.         }            .img-left img {   
4.             float:left;  /* 對圖片進行浮動就可以實現了  */               width:150px;   
5.         }        </style>   
6.           <div class="img-left">   
7.         <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>            這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文   
8.         <div style="clear:both;"></div>        </div>  

2）效果圖

很容易就出來想要的效果了。最關鍵的代碼：對圖片進行左浮動就可以了，這不是挺簡單的嘛。     

當把中間的文字替換成連續的英文字母時，出現問題了，如圖

于是查找相關資料，測試結果后發現：

瀏覽器默認解析英文或者數字時，是按照單詞進行解析。

也就是說，每個單詞是一個整體，遇到空間不足時，不會對單詞進行拆分。

所以才會出現上面這種情況。