全国服务热线:4008-888-888

技术知识

CSS完成文本围绕照片实际效果

CSS完成文本围绕照片实际效果

文本围绕照片,在Word里要是click1下右键,调1属下性便可以了。但在HTML文本文档里就沒有立即特性了。因而大家能够依靠CSS来完成这1实际效果。

大家先设置float的主要参数,假如照片必须左对齐设为left,若右对齐则为:right。另外,大家还能够依据必须设定照片和文本间距的室内空间,一样可用CSS的padding。

例:

拷贝编码
编码以下:
<img style="float:left;padding:20px 20px 20px 20px;" src="/Upic.jpg">将这1个照片标志句子,插进到网页页面文本正中间,就OK啦!

(1)文本围绕照片案例

XML/HTML Code拷贝內容到剪贴板
  1. <head>  
  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  3. <title>文本围绕</title>  
  4. <style>  
  5. div {   
  6. width:300px;   
  7. border:1px solid green   
  8. }   
  9. img {   
  10. float:left;   
  11. width:120px;   
  12. height:120px   
  13. }    
  14. </style>  
  15. </head>  
  16. <body>  
  17. <div>  
  18. <img src="img.gif" alt="照片" />  
  19. 文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕文本围绕</div>  
  20. </body>  
  21. </html>  

实际效果图:

(2)CSS文本围绕照片遇到的难题及处理方式:

1、序言

必须完成1个文本围绕照片的实际效果,心想so easy嘛。

1)编码一部分


拷贝编码
编码以下:
<style> .img-left { border: 3px solid #005588; width:300px; } .img-left img { float:left; /* 对照片开展波动便可以完成了 */ width:150px; } </style> <div> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/> 这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语这是1段汉语 <div></div> </div>

2)实际效果图

很非常容易就出来要想的实际效果了。最重要的编码:对照片开展左波动便可以了,这并不是挺简易的嘛。

2、遇到的难题

当把正中间的文本更换成持续的英文本母时,出現难题了,如图

因而搜索有关材料,检测結果后发现:

访问器默认设置分析英文或数据时,是依照单词开展分析。

也便是说,每一个单词是1个总体,遇到室内空间不够时,不容易对单词开展拆分。

因此才会出現上面这类状况。

上个比照图

3、处理方式

思索:CSS里边有木有有关的特性,能够对文本开展强制性换行呢?

回答自然是有的:word-break: break-all;

这样便可以处理难题了。

4、续篇:word-wrap、word-break

在搜索材料的情况下,发现也有个特性:word-wrap:break-word; 这咋还出現反复特性了呢?

实际上要不然,又是1通搜索材料,发现这俩還是有差别的:

1) word-wrap : break-word ;

--容许长单词换行到下1行。

当1个单词长度超出div的宽度时,默认设置是不容易换行的:以下图

假如设定word-wrap : break-word; 这个单词就会开展换行显示信息

2)word-break : break-all;

-- 是不是对单词开展断词解决。

--本人了解便是: 它会把1个单词的每一个字母拆分为单独的模块,

这样便可以把它填充到每一个地区,因此才可以做到文本围绕照片的实际效果。

以上便是CSS完成文本围绕照片时遇到的难题及处理方式,期待对大伙儿的学习培训有一定的协助。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服