CSS一行代码就可以解决第一个问题:

1.1 根据文字长度,自适应标签宽度

解决方法:把width的设置删掉,加一行代码 display:table;

.tag-footdetail{
  /*width: 300px;*/
  height: 40px;
  font-size: 1.5rem;
  line-height: 40px;
  text-align: center; 
  border-radius: 15px;
  border: 1px solid #D2B991;
  float: left;
  margin-right: 30px;
  margin-bottom: 10px;
  background-color: #D2B991;
  color: black;
  display:table;
}

1.2 根据文字长度,自适应标签高度

CSS中

height:auto;

display:inline-block;

2.Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick

解决方法:

1)注意引用juery是否有错 对应的<script>行代码请认真检查

2)这其实是个很简单的问题,主要是注意xxx是否是个字符串,要不要加引号。

以下为例,value.id和value.name 都是需要加' '的,加上之后可以解决这个问题。

function renderFootData(data) {
    $.each(data.result, function(index, value) {
    var html = '<div class="tag" style="font-size:28px;" onclick="getfootid(\''+value.id+'\',\''+value.name+'\');">'
    + value.name
    + '</div>';
    $("#foot-data-list").append($(html));
    });
}

[frontend] 根据文字长度 自适应宽度 自适应高度+ Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick的更多相关文章

  1. 基于jQuery自适应宽度跟高度可自定义焦点图

    基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cl ...

  2. 黄聪:table自适应宽度和高度

    自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自 ...

  3. UIWebView获得内容的高 高度自适应 宽度自适应

    UIWebView获得内容的高-作出自适应高的UIWebView- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *height ...

  4. 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)

    这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...

  5. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

  6. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. CSS学习笔记(6)--浮动,三列布局,高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  9. EasyUI设置Layout自适应浏览器宽度和高度

    //设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...

随机推荐

  1. Bootstrap基础--文本对齐风格

    在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑  右对齐,取值r ...

  2. URAL 1196. History Exam (二分)

    1196. History Exam Time limit: 1.5 second Memory limit: 64 MB Professor of history decided to simpli ...

  3. poj 1664 放苹果 (划分数)

    题意:中文题目,不解释... 题解: 第一种方法是暴力深搜:枚举盘子1~n放苹果数量的所有情况,不需要剪枝:将每次枚举的情况,即每个盘的苹果数量,以字典序排序,然后存进set里 以此去重像" ...

  4. JAVA正則表達式小总结

    近期项目中正在做后台校验,而后台校验也基本都是使用正則表達式校验.本文做一些粗略的总结. 1.字符串长度:.{1,10},注意有一个点在{}前,表示匹配全部.'{}'之前一定是一个捕获组,因此假设有其 ...

  5. CocoaPods建立私有仓库

    项目管理:CocoaPods建立私有仓库 2015-05-08 10:22 编辑: lansekuangtu 分类:iOS开发 来源:agdsdl 0 6367 CocoaPods项目管理私有仓库 招 ...

  6. Myeclipse中解决spring配置文件无提示问题

    相信非常多人都遇到过在部署spring框架写spring的配置文件时无提示内容的问题,都是仅仅能提示一些标签 名,而无法提示属性值,bz我本人今天也遇到了这种问题.在网上找了非常久答案,非常多方法都不 ...

  7. luogu3382【模板】三分法

    给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 看代码即可. #include <cstdio> #include < ...

  8. Bayesian Regression

    Thus we see that there are very close similarities between this Bayesian viewpoint and the conventio ...

  9. centos7 二次封装定制

  10. fopen文件目录问题

    程序当前目录下.如果是在 VC 里面运行的, 这个目录是工程的目录. 如果是双击 exe 运行的, 这个目录就是 exe 所在的目录.