文档章节

文字气泡自适应宽度

拉普拉斯婷
 拉普拉斯婷
发布于 2016/06/17 17:17
字数 163
阅读 28
收藏 0

实现聊天气泡效果,如图所示:

想要实现的效果图

<dl>
    <dt>15:20:36</dt>
    <dd>
        <img src="images/c_left_tip.png" alt="">
        <div>
             <p>
                在一定价值投资的前提下,注重长短期结合交易在一定价值投资的前提下定价值投资的前提下
             </p>
        </div>
    </dd>        
</dl>

p的内容要自适应文字宽度所以不能设置固定宽度,但是要和左边的img显示在一行,用float实现,没有宽度是不行的,所以关键是给p标签外面加一层div,然后给这个div设置宽度就OK啦!

© 著作权归作者所有

共有 人打赏支持
拉普拉斯婷
粉丝 0
博文 33
码字总数 5836
作品 0
深圳
overflow之scroll vs. auto

CSS有个overflow,为了让显示不下的内容滚动显示,通常会加上: 以前我天真地以为,他们的区别仅仅是,一个始终显示滚动条(),一个按需显示滚动条()。 直到遇到了一个自适应宽度同时自动...

寂寞的原子
2016/01/04
0
0
微信小程序特殊效果合集—左滑、气泡各种酷炫动画

微信小程序的开发并不难,但是有时我们想做出比较炫的效果,可能会一时没有思路或找不到方法。下面就整理了微信小程序的一些特殊效果的案例,均来自网络,供你参考。 1、文字跑马灯效果:htt...

anda0109
2017/08/08
0
0
Swift4.0学习笔记(二)——文本标签(UILabel)

1.首先介绍几个常用的几何元素 CGGeometry类定义几何元素的结构和操作几何元素的函数。 CGFloat: 浮点值的基本类型 CGPoint: 表示一个二维坐标系中的点 CGSize: 表示一个矩形的宽度和高度 CG...

古川不爱笑
2017/12/20
0
0
UL完美居中的方法

让UL完美居中 ul及li标签我们在写前端html页面的时候总是会用到,有时候我们需要一个横向菜单,不能定义宽度,里边的li还要自适应其中的文字内容(这是很苛刻的条件了),因为这时候的li有f...

如月王子
2015/12/29
98
0
【前端Talkking】 CSS系列——CSS深入理解之float浮动

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有"刨根问底"...

micstone
05/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

django rest framework 外键序列化方法与问题总结

django rest framework 外键序列化方法与问题总结 当借口中需要出现一对多关系的时候,我们可以用rest_framwork的序列化功能来处理,代码如下. # models.pyfrom django.db import modelscl...

_Change_
昨天
1
0
SingleNumber136 leetCode

Given a non-empty array of integers, every element appears twice except for one. Find that single one. Note: Your algorithm should have a linear runtime complexity. Could you im......

woshixin
昨天
1
0
String ,  StringBuffer ,  StringBuilder的区别

String , StringBuffer , StringBuilder的区别 String 首先,String 是用来表示一个字符串常量的,它是一个不可变对象,意味着,一旦我们创建了某个字符串之后,就不能再改变它的值了,我们可...

tsmyk0715
昨天
3
0
区块链100讲:UTXO 和 Account 模型对比

在当前区块链世界中,主要有两种记录保存方式,UTXO 模式(Unspent Transaction Output) 和 Account 模式。Bitcoin 采用的是 UTXO 模型,Ethereum 采用的 Account 模型,同样 CITA 也采用了 ...

HiBlock
昨天
1
0
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 { path:'/user/:id/:name', name:'user', component:()=>import('./views/User.vue') ...

tianma3798
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部