文字环绕图片广告CSS代码_CSS学习

资料来源：网络整理时间：2023/3/4 0:54:24 共计：3612 浏览

分享下非常简单，又很常用的文字环绕图片代码：

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

如果文字环绕的时候出了问题，比如纯字母不换行：

如何解决：

CSS里面有没有相关的属性，可以对文字进行强制换行呢？答案当然是有的：word-break: break-all;

今天我操作的具体案例：

zblog模板中，留言模块，文字环绕图片存在，所以需要用到文字环绕图片CSS：

<ul><li><img src="0.png" width="50" height="50" alt="白色简单蓝" />    
			<a href="" rel="nofollow">白色简单蓝</a>：<a href="http://localhost/post/13.html#cmt388" rel="nofollow">管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章管理管理文章管理文章管理文章</a></li><li><img src="0.png" width="50" height="50" alt="白色简单蓝" />    
			<a href="" rel="nofollow">白色简单蓝</a>：<a href="http://localhost/post/13.html#cmt387" rel="nofollow">广告位，可以使用HTML代码广告位，可以使用HTML代码广告位，可以使用HTML代码广告位，可以使用HTML代码</a></li>

CSS:

ul li img{float: left; width: 50px; height: 50px; padding-top: 6px; padding-right: 6px; padding-bottom: 6px;}

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：网站变灰色/网站变颜色CSS_CSS学习 | ·下一条：bootstrap幻灯片/轮播特效代码_网页特效