css文字環繞圖片的方法怎麼實現？（附代碼）-css教學-PHP中文網

首頁

web前端

css教學

css文字環繞圖片的方法怎麼實現？（附代碼）

不言

Oct 10, 2018 am 10:20 AM

在網頁的設計開發中，有的網頁是需要圖文並存的，而在一個圖文並存的網頁上，文字環繞圖片會讓整個網頁看起來美觀整潔，更加吸引用戶，所以接下來的這篇文章將會給大家及介紹如何使用css實現文字環繞圖片的方法，有需要的小伙伴可以參考一下。

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="/static/imghw/default1.png"  data-src="images/pandas.jpg"  class="lazy"   / alt="css文字環繞圖片的方法怎麼實現？ （附代碼）" >  
大熊猫（学名：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="/static/imghw/default1.png"  data-src="images/pandas.jpg"  class="lazy"   align="left"    style="max-width:90%" hspace="5" vspace="5" alt="css文字環繞圖片的方法怎麼實現？ （附代碼）" >
   大熊猫（学名：Ailuropoda melanoleuca；英文名称：Giant Panda），属于食肉目、熊科、大熊猫亚科和大熊猫属唯一的哺乳动物，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，它有着圆圆的脸颊，大大的黑眼圈，胖嘟嘟的身体，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。是世界上最可爱的动物之一。
</p>
</body>
</html>

登入後複製

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

css文字環繞圖片的方法怎麼實現？（附代碼）