html+css如何實現文字環繞圖片的效果

本文本家兒要介紹html若何搭配CSS實現文字環抱圖片，即文字繞排的結果。

東西/原料

1
籌辦一張圖片，新建一個空白html文件
2
此中html文件內容如下圖所示，html中包含了一張圖片，及對應的描述段落
3
給html添加head標簽，在標簽中界說樣式。
<style>
p {border:1px solid red;}
img {float:left; margin:0 5px 5px 0;}
</style>
4
用chrome瀏覽器打開上面的html文件，可以看到文字繞排結果，如下圖所示
5
因為在引入圖片時我們用到的語句是<img src="Penguins.jpg" style="width: 50%;height:auto"/>，這表白圖片的巨細是會跟著瀏覽器窗口的巨細調整而主動調整的。所以當放年夜或縮小瀏覽器窗口時，環抱結果會跟從著轉變。
6
若是要斷根文字繞排結果，只需將float: letf樣式界說刪除即可。