要達到的效果是可以環繞圖片

最近做的一個專案，有一個具體的要求，是要完成文字對圖片的環繞效果，其實不是很難；來做一份隨筆，記錄一下該做法，大家有什麼好的實現方式，也可以互相探討一下。

這是我自己寫的一個demo 已經實現環繞效果，不過具體的板式排列，還是需要根據具體的業務羅來做。先看一下效果圖；

其實做法並不難，最主要的是圖片的浮動，和父元素的設定css屬性  word-break: break-all；重要的是父元素是要有寬度，不然不會達到強制換行的效果。相對要注意的就是以上幾點

其他的話不多少直接貼程式碼

<div style="word-break: break-all; width: 500px; margin: 0 auto; ">
			<img src="img/banner1.png"  style="float: left;"/>
			<p>
				你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
				你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
				你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
				你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
			</p>
		</div>

 最後會達到上面demo圖的效果，更加具體的排版，請根具體業務需求來做；

我是程式小白健，熱愛前端工作。也不止於前端，希望可以和大家共同進步！