友人C

使用calc() 自适应多说表情框
代码 #ds-smilies-tooltip { max-width: 400px; min-wi...
扫描右侧二维码阅读全文
18
2016/08

使用calc() 自适应多说表情框

代码

#ds-smilies-tooltip {
    max-width: 400px;
    min-width: 200px;
    width: -webkit-calc(100% - 130px);  /* WebKit 536.3 (Chrome 19) and above, experimental */
    width:         calc(100% - 130px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */
}

在原有的css基础上面加上这段就OK了

介绍

很简单,calc就是Calculate(计算)简称,所以就是通过“+、-、*、/”运算计算括号内表达式的值,并把值作为最后的结果。

但是注意几点:

  1. 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;

  2. 最好加上不同浏览器的标识符,以便不同浏览器兼容

calc(100% - 130px);就是把屏幕的宽度 - 130px.(最大不超过400px,最小不小于200px)

但是由于一个屏幕内的宽度是固定的,所以层叠回复的表情框还是会超出边界== 不知道有啥方法可以处理一下?

代码是看了hran 的多说css.表示感谢!

参考文档

[ 1 ]cal 帮助文档

最后修改:2016 年 10 月 29 日 05 : 32 PM
如果觉得我的文章对你有用,请随意赞赏

9 条评论

  1. 肯德鸡

    哈哈,看不懂

  2. yufan
    输入文字有特效啊
    1. 一日
      @yufan

      三秋的博客里面有奥#[乖]

      1. yufan
        @一日 [OK]
  3. 铝合金拉手

    回来看看,现在做排名,没有方向了,每天就回复帖子

  4. yufan

    这个css我最近遇到了,在弄缩略图的时候# ,自己弄了好久自适应,结果还是求助大神了#[不高兴]

    1. 一日
      @yufan [乖]
  5. 工控资料窝

    很有用的技术分享,赞一下

    1. 一日

发表评论