CSS實現文字環繞圖片的效果-css教學-PHP中文網

CSS實現文字環繞圖片的效果

不言

發布： 2018-06-26 10:19:44

原創

7452 人瀏覽過

這篇文章主要為大家詳細介紹了CSS文字環繞圖片遇到的問題及解決方法，有興趣的小夥伴們可以參考一下

CSS實現文字環繞圖片效果

文字環繞圖片，在Word只要click一下右鍵，調一下屬性就可以了。但在HTML文件裡就沒有直接屬性了。因此我們可以藉助CSS來實現這一效果。

我們先設定float的參數，如果圖片需要左對齊設為left，若右對齊則為：right。此外，我們也可以依需求設定圖片和文字間隔的空間，同樣適用CSS的padding。

範例：

<img style="float:left;padding:20px 20px 20px 20px;" src="/Upic.jpg">

登入後複製

將這一個圖片識別語句，插入到頁面文字中間，就OK囉！

（一）文字環繞圖片實例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字环绕</title>
<style>
p {   
width:300px;   
border:1px solid green   
}   
img {   
float:left;   
width:120px;   
height:120px   
}    
</style>
</head>
<body>
<p>
<img src="img.gif" alt="图片" />
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
</body>
</html>

登入後複製

效果圖：

（二）CSS文字環繞圖片遇到的問題及解決方法：

一、前言

需要實現一個文字環繞圖片的效果，心想so easy嘛。

1）代碼部分

<style> .img-left { border: 3px solid #005588; width:300px; } .img-left img { float:left; /* 对图片进行浮动就可以实现了 */ width:150px; } </style> <p> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>

登入後複製

這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文

2）效果圖