css如何實現文字環繞圖片的方法

css如何實現文字環繞圖片的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

創新互聯建站電話聯系：18980820575，為您提供成都網站建設網頁設計及定制高端網站建設服務，創新互聯建站網頁制作領域十年，包括成都護欄打樁機等多個領域擁有豐富的網站營銷經驗，選擇創新互聯建站，為網站錦上添花。

css文字環繞圖片可以利用css屬性實現，需要先設定float的參數，如果圖片需要左對齊設為left，若右對齊則設為right；下面我們來直接看一下css文字環繞圖片的實現代碼。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {   
width:400px;   
border:1px solid green   
}   
img {   
float:left;   
width:120px;   
height:120px;   
}  
</style>
</head>
<body>
<div>  
<img src="images/pandas.jpg" />  
大熊貓（學名：Ailuropoda melanoleuca；英文名稱：Giant Panda），屬于食肉目、熊科、大熊貓亞科和大熊貓屬唯一的哺乳動物，頭軀長1.2-1.8米，尾長10-12厘米。體重80-120千克，最重可達180千克，體色為黑白兩色，它有著圓圓的臉頰，大大的黑眼圈，胖嘟嘟的身體，標志性的內八字的行走方式，也有解剖刀般鋒利的爪子。是世界上最可愛的動物之一。</div> 
</body>
</html>

css文字環繞圖片的效果如下：

css如何實現文字環繞圖片的方法

說明：我們還可以根據需要設置圖片和文字間隔的空間，同樣適用CSS的padding。

除了上述方法之外還可以利用圖片屬性實現文字環繞圖片，我們來直接看代碼。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<p style="width:400px;">
    <img src="images/pandas.jpg" align="left" width="120" hspace="5" vspace="5">
   大熊貓（學名：Ailuropoda melanoleuca；英文名稱：Giant Panda），屬于食肉目、熊科、大熊貓亞科和大熊貓屬唯一的哺乳動物，頭軀長1.2-1.8米，尾長10-12厘米。體重80-120千克，最重可達180千克，體色為黑白兩色，它有著圓圓的臉頰，大大的黑眼圈，胖嘟嘟的身體，標志性的內八字的行走方式，也有解剖刀般鋒利的爪子。是世界上最可愛的動物之一。
</p>
</body>
</html>

文字環繞圖片的效果如下：

css如何實現文字環繞圖片的方法