css中文字加图片的布局实现
发布时间:2013-09-06 11:35:47 作者:佚名
我要评论
![](/skin/2018/images/text-message.png)
在文章中难免会出现表情,在在这种情况下如何以比较合理的方式显示文字与表情呢?其实很简单,通过简单几行CSS样式便可实现,感兴趣的朋友可以了解下
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
复制代码
代码如下:<div class="messagebox">
<span class="message">aaaaa<img src="e1.png">bbbbbbbbbbbbb<img src="e2.png">cccc</span>
</div>
css:
复制代码
代码如下:.messagebox
{
width: 300px;
height: auto;
word-wrap: break-word;
word-break:break-all;
white-space: pre-wrap;
background-color: #333;
padding: 0px;
margin:0px;
}
.message
{
font-size: 30px;
width: 300px;
height: auto;
}
img
{
width: 60px;
height: 50px;
}
效果图:
![](http://img.jbzj.com/file_images/article/201309/201396113609190.png?201386113640)
相关文章
- 这篇文章主要介绍了CSS实现动态图片的九宫格布局的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-03
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
这篇文章主要为大家介绍了正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化,具体实现过程请看下文2014-10-10- 这篇文章主要为大家介绍了在DIV+CSS布局的页面里,让布局、背景图片、文字内容居中的方法,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的2014-10-09
- input框中有图片的情况下如何使用css实现,为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,其实很简单,具体的实现如下,感兴趣的朋友可以参考下2013-08-01
- 这只是一个布局实例,学习CSS有用处,因为这个用来修饰图片的边框做的不错,主要是想了解如何用CSS实现这种布局,在相对、绝对定位,或者是在多种浏览器不失真、不2009-11-04
- 纯css实现朋友圈不同数量图片不同布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-06-10
最新评论