css文字環繞圖片的方法怎麼實現？ （附代碼）
- 不言原創
- 2018-10-10 10:20:5714276瀏覽
在網頁的設計開發中，有的網頁是需要圖文並存的，而在一個圖文並存的網頁上，文字環繞圖片會讓整個網頁看起來美觀整潔，更加吸引用戶，所以接下來的這篇文章將會給大家及介紹如何使用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="images/pandas.jpg" / alt="css文字環繞圖片的方法怎麼實現？ （附代碼）" >
大熊猫（学名：Ailuropoda melanoleuca；英文名称：Giant Panda），属于食肉目、熊科、大熊猫亚科和大熊猫属唯一的哺乳动物，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，它有着圆圆的脸颊，大大的黑眼圈，胖嘟嘟的身体，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。是世界上最可爱的动物之一。</div>
</body>
</html>css文字環繞圖片的效果如下：
說明：我們也可以根據需要設定圖片和文字間隔的空間，同樣適用CSS的padding。
除了上述方法之外還可以利用圖片屬性實現文字環繞圖片，我們來直接看程式碼。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p style="width:400px;">
<img src="images/pandas.jpg" 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>文字環繞圖片的效果如下：
說明：設定標籤的屬性align=「left」即可，如果想讓圖片居右，文字在左環繞，可以將align屬性設為right，其中vspace 表示圖片與文字的上下距離，hspace表示左右距離。
以上就是本篇文章的全部內容了，想要了解更多的精彩內容可以關注php中文網！ ！ ！
以上是css文字環繞圖片的方法怎麼實現？ （附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn